掩码文本框_带有混合模式的简易跨浏览器文本掩码

掩码文本框

There are many ways to do text clipping masks (the appearance of graphics or effects inside letterforms) on the web, but the techniques are all somewhat scattershot: Chrome and Safari have long supported -webkit-background-clip:text;, but that only addresses two browsers; there is also an SVG technique, but that has limitations also.

在网络上有很多方法可以做文本剪切蒙版( 在字母形式中图形或效果的外观)，但是这些技术都有些分散： Chrome和Safari长期以来都支持-webkit-background-clip:text; ，但这仅适用于两个浏览器； 还有一种SVG技术 ，但这也有局限性。

After experimenting with blend modes I realized it was possible to use them to create text clipping masks by “sandwiching” text and backgrounds. One nice advantage is the technique is not only fully cross-browser (with the exception of IE), but it’s also naturally progressive, with elegant fallbacks.

在尝试了混合模式之后，我意识到可以通过“夹层”文本和背景来使用它们来创建文本剪贴蒙版。 一个不错的优点是，该技术不仅可以完全跨浏览器(IE除外)，而且自然地是渐进式的，具有出色的后备功能。

技术 (The Technique)

The essence of the method is to wrap text with a container element:

该方法的本质是用容器元素包装文本：

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

For effective clipping effects, a font that has bold lettering and thick strokes tends to work best.

为了获得有效的剪裁效果，具有粗体字母和粗笔触的字体往往效果最好。

The text is sized and given a background color that floods its container:

调整文本大小并赋予背景色以充斥其容器：

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

The colors used will work best if they’re in complete opposition; here I’ve used a black background with white text.

如果它们完全相反，则所用的颜色将效果最佳。 在这里，我使用了黑色背景和白色文字。

The container is provided with a background image; this image won’t be seen at this stage, as it’s obscured by the flood background on the text:

容器带有背景图像 ; 该图片目前不会显示，因为文字上的洪水背景将其遮盖了：

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

Finally, mix-blend-mode is applied to the text element, opposite to its background color:

最后， mix-blend-mode应用于文本元素，与其背景色相反 ：

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

That is, if the background is black, use darken; if the colors are reversed (black text on a white background, like the “Houston” example above) use lighten:

也就是说，如果背景为黑色，请使用darken ； 如果颜色反转(白色背景上的黑色文本，例如上面的“休斯顿”示例)，请使用lighten ：

.light h1 {
	mix-blend-mode: lighten;
}

The really great part? If the browser doesn’t support mix-blend-mode, the user just sees the text, against a plain background with maximum contrast. Either way, the text remains true text: you can select it, copy it, and change it at will.

真正伟大的部分？ 如果浏览器不支持mix-blend-mode ，则用户只会在纯对比度最高的纯背景下看到文本。 无论哪种方式，文本都是真实的文本：您可以选择，复制和随意更改它。

逆转 (Reversal)

If you want the image to take precedence in browsers with no mix-blend-mode support, rather than the text, the code complicates just slightly. The background image becomes a real image, placed on top of the text:

如果您希望图像在不支持mix-blend-mode而不是文本的浏览器中优先处理，则代码会稍微复杂一些。 背景图像变成真实图像，放置在文本顶部 ：

<div class="dark">
	<h1>Chicago</h1>
	<img src="chicago.jpg" alt="Photograph of the Chicago skyline taken from the water during the day">
</div>

The <h1> is treated the same in the CSS, except it lacks any background. The image is positioned absolutely on top of the text.

在CSS中，对<h1>的处理相同，只是缺少任何background 。 图像绝对位于文本的顶部 。

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%;
}

Then the image is set to the appropriate mix-blend-mode:

然后将图像设置为适当的mix-blend-mode ：

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

Again, the opposite effect (black text, white background) is also achievable; see the CodePen demo for more details. Visually, the effect is the same as the first example; the only difference is which element takes precedence during selection and graceful degradation.

同样，相反的效果(黑色文本，白色背景)也是可以实现的。 有关更多详细信息，请参见CodePen演示 。 在视觉上，效果与第一个示例相同； 唯一的区别是在选择和正常降级期间哪个元素优先。

结论 (Conclusion)

Blend modes are one of the newest aspects of CSS, and have untapped richness for design and UI. In the next article, I’ll look at still more possibilities with text and blends.

混合模式是CSS的最新方面之一，具有丰富的设计和UI用途。 在下一篇文章中，我将介绍文本和混合的更多可能性。

翻译自: https://thenewcode.com/1032/Easy-Cross-Browser-Text-Masks-with-Blend-Modes

掩码文本框