CSS遮罩图像问题

Question

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

http://piersrueb.com/colors/

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

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

如果你能告诉我哪里出了问题，我会很感激。

- jimbouton

Answer 1

我希望你正在查看这个：

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

您可以使用CSS3属性-webkit-text-fill-color: transparent;来实现透明文本，以及-webkit-background-clip: text;来将背景图像应用于文本剪辑...

但是这些属性只支持Webkit浏览器...

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;
}

​

- Shailender Arora

---

谢谢，我可能会尝试一下。 - jimbouton

Answer 2

遮罩图像必须是单色的。其中的颜色不会产生任何影响。

- BenM

---

不太确定...我是凭记忆工作的，但我肯定以前用过照片。 - will

嗯，我认为颜色和部分透明度只支持SVG图像，对吧？ - BenM

Answer 3

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

我无法告诉你为什么会发生这种情况，也许是一些奇怪的图像元数据？但我希望这可以帮助你解决问题。 :)

- will