gpt4 book ai didi

css mask-image 不工作

转载 作者:太空宇宙 更新时间:2023-11-04 05:02:16 24 4
gpt4 key购买 nike

知道为什么标志没有填充下面的 h2 文本吗?开发网址:http://runnerupapparel.com/building/ (信息面板)

后台 url 链接正确:http://runnerupapparel.com/building/images/usa.png

h2.usa {
background-size: 100px auto;
-webkit-mask-image: url(../images/usa.png);
-o-mask-image: url(../images/usa.png);
-moz-mask-image: url(../images/usa.png);
-ms-mask-image: url(../images/usa.png);
mask-image: url(../images/usa.png);
letter-spacing: -2px;
font-weight: bold;
}

最佳答案

你想要达到的效果是什么?

您正在使用的图像是 100% 不透明的。 mask-image 仅在使用的 png 图像具有不同的透明度部分时才有用。它实质上将 png 图像的透明度属性应用于您正在使用它的任何对象。

为了更好地说明我的意思:http://www.benbarnett.net/2010/11/01/css3-text-effects-with-webkit-masking/

我已经拍摄了您的图像,对其进行了去饱和处理,并迅速移除了所有白色区域(使它们透明)。将您的 mask-image URL 替换为我编辑的 URL,您可以看到不同之处:http://i49.tinypic.com/xe278p.png

还值得注意的是,目前 mask-image 仅适用于 webkit 浏览器(例如 Chrome)。

关于css mask-image 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11232106/

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