mix-blend_如何使用CSS3 mix-blend-mode在图像上显示文本

大型显示文本后面的图像背景看起来很棒。 但是，它CSS实现不是那么简单。 我们可以使用background-clip: text; 属性，但是如果没有足够的浏览器支持，它仍然是一项实验性功能 。

在文本后面显示图像背景CSS替代方法是使用mix-blend-mode属性 。 所有现代台式机和移动浏览器均相当支持HTML元素的混合模式，只有少数浏览器除外，例如Internet Explorer。

在本文中，我们将看到mix-blend-mode （特别是它的两种模式）如何工作，以及在两种用例中如何使用它来显示带有图像背景的文本 ：

1. 当通过文字可以看到背景图像时
2. 当背景图片围绕文字运行时

请参阅下面的演示中的一些示例（图像来自unsplash.com）。

看一看在混合模式的名单 ，其中有我们将使用multiply和screen在这个岗位。

首先，让我们研究这两种特定的混合模式如何工作。

从技术上讲，混合模式是使用元素及其背景的颜色分量来计算最终颜色值的功能。

在multiply混合模式下，元素及其背景的各个颜色相乘 ，然后将所得的颜色应用于最终的混合版本。

B(Cb, Cs) = Cb × Cs

其中： Cb –背景颜色分量Cs –源元素的颜色分量B –混合功能

当Cb和Cs相乘时，所得颜色是这两种颜色成分的混合，并且与两种颜色中最深的颜色一样深 。

要创建文本图像背景，我们需要关注Cs （源元素的颜色分量）为black或white的情况 。

如果Cs为黑色，则其值为0 ，则输出颜色也将为黑色，因为Cb × 0 = 0 。 因此，当元素被涂成黑色时， 背景是什么颜色都没有关系 ，混合后我们只能看到黑色。

如果Cs为白色，则其值为1 ，则输出颜色为Cb ，因为Cb × 1 = Cb 。 所以在这种情况下，我们直接看到的大背景下，因为它是 。

screen混合模式与multiply混合模式相似，但结果相反 。 因此， 黑色前景按原样显示背景， 白色前景按任何背景显示白色 。

让我们快速查看其公式 ：

B(Cb, Cs) = Cb + Cs - (Cb × Cs)

当Cs为黑色 （0）时，混合后背景色将显示为：

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

当Cs为白色 （1）时，结果将为白色且带有任何背景，例如：

Cb + 1 -(Cb × 1) = Cb + 1 - Cb = 1

1.图片通过文字显示

为了显示通过其背景图像显示的文本，我们使用具有黑色文本和白色周围空间的screen混合模式 。

<div class="backdrop">
 <p class="text">Water</p>
</div>

.backdrop {
 width: 600px; height: 210px;
 background-image: url(someimage.jpg);
 background-size: 100%;
 margin: auto;
}
.text {
 color: black;
 background-color: white;
 mix-blend-mode: screen;
 width: 100%;
 height: 100%;
 font-size: 160pt;
 font-weight: bolder;
 text-align: center;
 line-height: 210px;
 margin: 0;
}

目前，我们的文本如下所示，在下一步中，我们将自定义颜色添加到背景中。

添加颜色

正如您现在可能已经猜到的那样，使用混合模式只能为文本周围的区域留出两种颜色选择- 黑色或白色 。 但是， 对于白色 ，如果覆盖层颜色与所使用的图像很好地匹配 ，则可以使用覆盖层为其添加一些颜色。

要将颜色添加到周围区域，请在HTML中为覆盖层添加<div> ，然后为其提供具有高透明度的背景色 。 还要对叠加层使用mix-blend-mode: multiply属性，因为它有助于叠加层的背景色与出现在文本内部的图像更好地融合 。

<div class="backdrop">
 <p class="text">Water</p>
 <div class="overlay"></div>
</div>

.overlay {
 background-color: rgba(0,255,255,.1);
 mix-blend-mode: multiply;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
}

通过这种技术，我们可以使用图像背景为文本周围的周围区域着色：

请注意，该技术仅适用于微妙的透明颜色 。 如果您使用完全不透明的颜色，或者与图像不匹配的颜色，则出现在文本内部的图像将具有非常明显的所用颜色色调，因此除非您要使用该外观，否则请避免不透明的颜色 。

2.文字被图像背景包围

即使将普通文本放置在图像背景上也需要相同的技巧 ，但我仍将向您展示一个示例，演示上述演示在反转效果时的样子，即当文本颜色为白色而背景为黑色时。

.text {
 color: white;
 background-color: black;
 mix-blend-mode: screen;
 width: 100%;
 height: 100%;
 font-size: 160pt;
 font-weight: bolder;
 text-align: center;
 line-height: 210px;
 margin: 0;
}

您可以使用相同的覆盖层 ，以便为文本添加一些颜色，除非您希望保持白色。

.overlay {
 background-color: rgba(0,255,255,.1);
 mix-blend-mode: multiply;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
}

在下面，您可以看到相反的情况：

请注意，在Internet Explorer或任何其他不支持mix-blend-mode属性的浏览器中，图像背景将不会出现，并且文本将保持黑色（或白色）。

翻译自: https://www.hongkiat.com/blog/css3-mix-blend-mode/