Question

我正在尝试使用mask-image属性将纹理放在文本上...当我在其他人的网站上查看它时它起作用但是当我尝试在演示网站上查看它时我没有工作... 这是我的完整代码:(我不拥有正在使用的图像）

<!doctype html>
<html>
<head>
<h1 style="-webkit-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
-o-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
-moz-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
font-size:120px;">
test
</h1>
</head>
<body>
</body>
</html>

Answer 1

基于示例图像，我将在这里进行讨论并假设你真正想要的是这个（webkit的例子）：

h1 {
    font-size: 120px;
    background: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg) repeat 0 0, white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

http://jsfiddle.net/ZdvXg/

只有在图像中有透明区域时，才能使用遮罩：

http://jsfiddle.net/ZdvXg/1/

CSS mask-image无法正常工作（尝试过firefox和safari）

1 个答案: