0

关于为什么标志没有填充下面的 h2 文本的任何想法?开发网址:http ://runnerupapparel.com/building/ (信息面板)

背景网址链接正确: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;
}
4

1 回答 1

2

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

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

一个更好的例子来说明我的意思:http ://www.benbarnett.net/2010/11/01/css3-text-effects-with-webkit-masking/

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

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

于 2012-06-27T19:13:46.110 回答