CSS3背景剪辑

时间:2010-08-30 13:22:26

标签: css3

我正在使用-webkit-background-clip将背景图像限制为h2元素中的文本。

我的问题是,-moz-background-clip功能是否一样?这似乎只适用于webkit浏览器,这表明它在Firefox中不起作用:

#header h1 a{
    background: url(img/logo-overlay.png) no-repeat #000;
    -moz-background-clip: text; -webkit-background-clip: text;
    color: transparent; -moz-text-fill-color: transparent; -webkit-text-fill-color: transparent;
    text-decoration: none;
}

目前,在Firefox中,文本是隐藏的(因为颜色:透明和文本填充颜色:透明属性),只有背景图像和颜色在元素的矩形形状中可见。

有什么想法吗?

2 个答案:

答案 0 :(得分:2)

我不相信textbackground-clip属性的有效值。

MDC声明了两个不同的声明,一个用于Firefox 3.6及更低版本,另一个用于即将推出的Firefox 4.它还声明了webkit等效。

Firefox (Gecko)     
1.0-3.6 (1.2-1.9.2)    -moz-background-clip:  padding | border
4.0 (2.0)              background-clip:     padding-box | border-box | content-box

Safari (WebKit)
3.0 (522)              -webkit-background-clip:  padding | border | content

请在此处查看MDC文档:https://developer.mozilla.org/en/CSS/background-clip

至于你想要达到的目标,我相信content-box值正是你所寻找的。请注意,Firefox 3.6及更低版本似乎不支持此值。

请参阅:http://www.css3.info/preview/background-origin-and-background-clip/

答案 1 :(得分:0)

text现在是background-clip的实验性API,可以在前景文本中绘制背景。

  

Firefox,Chrome和Safari支持非官方的-webkit-background-clip:文本(仅带前缀)

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip