使用CSS Blend Modes制作跨浏览器的文字遮罩效果

05-25 次

标签 Blend modes 文字遮罩

我们可以有许多方法来在网页上制作文字制作效果。但是这些技术都有局限性：Chrome和Safari浏览器支持-webkit-background-clip:text;属性来制作文字遮罩效果，但这个属性只局限于这两个浏览器使用。另外我们也可以使用SVG来制作文字遮罩效果，但是同样也有一些局限性。

现在，通过CSS Blend Modes，我们可以制作出非常漂亮的文字遮罩效果。这项技术的优点是它不仅是跨浏览器的（IE浏览器除外），而且它可以在不支持的浏览器上很优雅的进行回退。

制作文字遮罩效果

使用CSS Blend Modes来制作文字制作效果，它的HTML结果使用一个容器来包裹住文本。

<div class="dark"> <h1>HTMLEAF</h1> </div>

要制作这种文字遮罩效果，文字需要进行加粗，字体要大，这样效果才会比较好。

.dark h1 {
  margin: 0;
  font-size: 20vw;
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
  line-height: 1.9;
  color: #fff;
  background: #000;
}

如果浏览器不支持CSS Blend Modes，color属性将会发生作用，将文字填充为设置的颜色。这里收集黑色的背景，所以设置了白色的文字。

包裹文字的容器为它提供一个背景图片，背景图片并不是完全看得见的，只有在文字下面的部分才可以看见。

.dark {
  text-align: center;
  background-size: cover;
  background-image: url(1.jpg);
}

最后，在文字上使用mix-blend-mode属性，取值于背景色相同。

.dark h1 { mix-blend-mode: darken; }

HTMLEAF

你可以尝试选择并修改上面的文字...

也就是说，如果背景是黑色的，使用darken属性。如果背景是白色的，那么就使用lighten属性。

HTMLEAF.COM

你可以尝试选择并修改上面的文字...

效果是不是非常不错呢？如果浏览器不支持mix-blend-mode属性，用户只会看到文本，没有遮罩效果。另外，这些文字是一些纯文本，你可以复制它们，甚至可以修改它们。

文字和图片对换

如果你想要图片占主导地位，而不是文字，值需要稍微的修改一下代码即可：

<div class="dark">
  <h1>Chicago</h1>
  <img src="1.jpg" alt="...">
</div>

<h1>的样式和前面是一样的，只是没有backgroud属性。图片被使用绝对定位放置在文字的上面。

div.dark {
  text-align: center;
  position: relative;
  background: #000;
}
.dark h1 {
  margin: 0;
  font-size: 20vw;
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
  line-height: 1.9;
  color: #fff;
}
div.dark img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

最后为图片设置mix-blend-mode属性。