gpt4 book ai didi

CSS mask-image 不工作(试过 firefox 和 safari)

转载 作者:行者123 更新时间:2023-11-28 13:38:33 24 4
gpt4 key购买 nike

我正在尝试使用 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>

最佳答案

基于示例图像,我将在这里冒险并假设您真正想要的是这个(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/

mask 只有在图像中有透明区域时才有意义:

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

关于CSS mask-image 不工作(试过 firefox 和 safari),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8708341/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com