为什么 CSS3 背景剪辑或背景起源不起作用?我的代码有什么问题吗?
我想使用三个图像来制作背景:
我也想使用CSS3背景剪辑或背景- origin 属性,使用多个图像 这是我的CSS代码:
.border
{
background:url("fancy_title_main.png"),url("fancy_title_left.png"),url("fancy_title_right.png");
background-repeat:repeat-x,no-repeat,no-repeat;
background-position:center,left,right;
background-clip: content,border,border;
background-origin:content,border,border;
-moz-background-clip: content,border,border;
-moz-background-origin: content,border,border;
-webkit-background-clip: content,border,border;
-webkit-background-origin:content,border,border;
border-width:0 15px;
border-style:solid;
width:80px;
height:32px;
}
但是,它不起作用,在firefox 3.6.6上:
在firebug中:
在我的 css 中,我设置了 -moz-background-clip: content,border,border;< /code> 但它显示
-moz-background-clip:border, border, border;
为什么?
我怎样才能制作出我想要的背景?我的 CSS 代码有什么问题?
谢谢
I want use three images to make a background:
As well I want use CSS3 background-clip or background-origin property,to use multiple images
here is my css code:
.border
{
background:url("fancy_title_main.png"),url("fancy_title_left.png"),url("fancy_title_right.png");
background-repeat:repeat-x,no-repeat,no-repeat;
background-position:center,left,right;
background-clip: content,border,border;
background-origin:content,border,border;
-moz-background-clip: content,border,border;
-moz-background-origin: content,border,border;
-webkit-background-clip: content,border,border;
-webkit-background-origin:content,border,border;
border-width:0 15px;
border-style:solid;
width:80px;
height:32px;
}
however,it doesn't work,on firefox 3.6.6:
in the firebug:
In my css ,I set the -moz-background-clip: content,border,border;
but it show -moz-background-clip:border, border, border;
Why?
How can I make the background like I wanted?What's wrong with my CSS code?
Thank you
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您需要使用内容框、边框框和填充框。
https://developer.mozilla.org/en/CSS/background-clip
You need to be using content-box, border-box, and padding-box.
https://developer.mozilla.org/en/CSS/background-clip
您可能需要
border-color:transparent
(另请参阅我上面的评论)。You might want
border-color: transparent
(and see also my comment above).