Question

为什么国旗没有填写下面的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;
}

Answer 1

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

您使用的图像始终是100％不透明的。仅当使用的png图像具有不同的透明度部分时，mask-image才有用。它基本上将png图像的透明属性应用于您使用它的任何内容。

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

我拍摄了你的图像，使其去饱和，并迅速移除所有白色区域（使其透明）。将您的mask-image网址替换为我编辑过的网址，您可以看到差异：http://i49.tinypic.com/xe278p.png

值得注意的是，目前mask-image仅适用于webkit浏览器（例如Chrome）。

css mask-image无效

1 个答案: