【问题标题】:CSS3 background-clipCSS3 背景剪辑
【发布时间】:2011-04-05 18:28:25
【问题描述】:

我正在使用 -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 中,文本是隐藏的(因为 color: transparent 和 text-fill-color: transparent 属性),只有背景图片和颜色在元素的矩形形状中可见。

有什么想法吗?

【问题讨论】:

    标签: css


    【解决方案1】:

    我不认为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/

    【讨论】:

    • 有趣。 Webkit 浏览器中的“文本”值能够实现这一点(放大):cl.ly/2Ame。那么,它现在必须完全是 Webkit 专有的。使用内容框不起作用 - 呈现与完全省略背景剪辑完全相同的结果。那应该表现得不同吗?感谢您的回复。
    【解决方案2】:

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

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

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

    【讨论】: