3

我正在尝试用条纹图像掩盖一些文本。当我检查元素时，我可以看到遮罩图像，但它不起作用。下方链接。

http://piersrueb.com/colors/

我从 Trent Walton 网站获得了代码，奇怪的是，如果我从 Trent 的网站复制图像路径并将其放在我的 css 中，它就可以工作。

http://trentwalton.com/2011/05/19/mask-image-text/

如果您能告诉我哪里出错了，我将不胜感激。

4

3 回答 3

1

蒙版图像必须是单色的。它们内部的颜色将不起作用。

于 2012-06-20T10:39:38.927 回答
1

这与您的 PNG 有关。我不太确定为什么，但我很快将您的http://piersrueb.com/colors/img/stripes.png换成了Trent 的http://trentwalton.com/wp-content/uploads/2011/05/mask .png使用 Chrome 的网络检查器，它开始工作。

我无法告诉你为什么会发生这种情况，也许是一些奇怪的图像元？但我希望这能帮助你弄清楚。:)

于 2012-06-20T10:44:34.740 回答
1

我希望你在看这个：-

http://jsfiddle.net/rD6wq/18/

您可以使用 css3 属性-webkit-text-fill-color: transparent; 对于透明文本 &
-webkit-background-clip: text; 用于在文本剪辑中调用 bg 图像....

但这些属性只支持 web-kit 浏览器.....

HTML

<p>R</p>

<p>T</p>

<p>SUPER</p>

CSS

p{
    font-size:5em;
    font-family:impact;
    background: url(http://farm8.staticflickr.com/7245/7086291447_06484c1d6a_z.jpg) fixed; 
position:relative;
            -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;        
    display:inline-block;
    text-align:center;
    padding:10px;
}
p:after{
    content:'';
    position:absolute;
    background:rgba(0,0,0,0.5);
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-1;
}
body{
    background: url(http://farm8.staticflickr.com/7245/7086291447_06484c1d6a_z.jpg)  fixed;
}

​</p>

于 2012-06-20T12:06:03.347 回答