CSS 图像遮罩 和文本 background-clip:text; mask-image

CSS 图像遮罩 和文本 

 

英文原文：CSS Mask-Image & Text

 

近期我写了一篇关于控制Web排版的文章，专注于CSS 伪选择器以及深入到字母的控制方法。作为Web设计者，我想要web设计达到印刷设计师能达到的控制层次，甚至包括纹理。我慢慢爱上了两种webkit CSS属性，并希望它们能获得更多的浏览器支持。我最爱的是background-clip:text;但是目前需要可怕的降级。第二个是mask-image，它可用于文字的效果。

在下面的例子中，我在文字上实现了轻微的灰度斑点纹理。鼠标移入该文字上方可以看到在不支持该特性的浏览器显示的效果。

以下是去除结构部分的CSS代码：

.mask-box h3, .mask-box p{
-webkit-mask-image: url(/path/to/mask.png);
-o-mask-image: url(/path/to/mask.png);
-moz-mask-image: url(/path/to/mask.png);
mask-image: url(/path/to/mask.png);
text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6);}

在许多地方，我更喜欢文字稍微使用纹理。我见过使用mask-image的最好的例子是Squared Eye的Matthew Smith设计、Michael Meyer实现的页面：A Night For Adoption。

如果你也加入到使用CSS3属性的行列中，别忘了background-clip:text 和 mask-image, 高级CSS伪选择器，CSS transforms。我们将不再有理由使用图片来制作精美的web了。