Question

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

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

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

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

Answer 1

蒙版图像必须是单色的。它们内部的颜色将无效。

Answer 2

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

我无法告诉你为什么会这样，也许是一些奇怪的形象元？但我希望这可以帮助你解决这个问题。：）

Answer 3

我希望你这样看： -

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

您可以使用css3属性 -webkit-text-fill-color：transparent; 获取透明文字＆amp;
-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;
}

CSS掩码图像问题

3 个答案: