我有一些 html 文本,并想应用一些 css 对文本的像素执行以下操作:
- 使用下面的像素应用差异混合模式。
- 应用灰度滤镜。
- 应用具有非常高设置的对比度过滤器。
这将允许将 UI 文本元素定位在图像上,同时仍然具有相当的可读性。
我做了不同的尝试,但仍然没有成功。这是我尝试将文本包装在容器中的一个。混合模式应用于实际的文本元素,而过滤器应用于包装器:
/* Filters and Blend Mode */
.h1Wrapper {
filter: grayscale(1) contrast(200);
}
h1 {
mix-blend-mode: difference;
color: white;
}
/* SETUP */
.container {
width: 600px;
height: 200px;
position: relative;
}
img {
margin: auto;
display: block;
max-width: 100%;
max-height: 100%;
}
.h1Wrapper {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
h1 {
text-align: center;
position: absolute;
top: 0px;
width: 100%;
}
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">
<div class="h1Wrapper">
<h1>hello there, good morning, booboo sousa</h1>
</div>
</div>
但是,如果您运行它,您会发现它不起作用。在这种情况下,混合模式似乎被忽略了。
When I tried to put the filter and blend mode css both on the h1 element, the filters where both applied before the blend mode, which lead to a different effect that I am trying to achieve.
For clarity, here is a photoshop version of the effect I am trying to achieve: