大型显示文本后面的图像背景看起来很棒。 但是,它CSS实现不是那么简单。 我们可以使用background-clip: text;
属性,但是如果没有足够的浏览器支持,它仍然是一项实验性功能 。
在文本后面显示图像背景CSS替代方法是使用mix-blend-mode
属性 。 所有现代台式机和移动浏览器均相当支持HTML元素的混合模式,只有少数浏览器除外,例如Internet Explorer。
在本文中,我们将看到mix-blend-mode
(特别是它的两种模式)如何工作,以及在两种用例中如何使用它来显示带有图像背景的文本 :
请参阅下面的演示中的一些示例(图像来自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
为了显示通过其背景图像显示的文本,我们使用具有黑色文本和白色周围空间的screen
混合模式 。
Water
.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中为覆盖层添加
mix-blend-mode: multiply
属性,因为它有助于叠加层的背景色与出现在文本内部的图像更好地融合 。
Water
.overlay {
background-color: rgba(0,255,255,.1);
mix-blend-mode: multiply;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
通过这种技术,我们可以使用图像背景为文本周围的周围区域着色:
请注意,该技术仅适用于微妙的透明颜色 。 如果您使用完全不透明的颜色,或者与图像不匹配的颜色,则出现在文本内部的图像将具有非常明显的所用颜色色调,因此除非您要使用该外观,否则请避免不透明的颜色 。
即使将普通文本放置在图像背景上也需要相同的技巧 ,但我仍将向您展示一个示例,演示上述演示在反转效果时的样子,即当文本颜色为白色而背景为黑色时。
.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/