基于带有CSS的背景图像的黑白文本 [英] black and white text based on background image with css

问题描述

我正在尝试在双色标头上实现黑白文本的效果，该标头的一面总是白色，另一面带有背景图像（不同颜色）。

I am trying to achieve this effect of a black and white text on a bi-colored header which is always white on a side, and with a background image on the other side (of different colors).

这是本示例中使用的CSS，仅因为图像具有纯黑色背景：

this is the css used for this example, which works only because the image has a solid black background:

.text {
  position: relative;
  color: rgb(255, 255, 255);
  mix-blend-mode: difference;
  text-transform: uppercase;
  font-size: 60px;
}

如果背景图像没有纯黑色，则此方法无效背景：

this doesn't work if the background image doesn't have a solid black background:

在这种情况下，我得到了应该得到，但是我想要的是在左边得到白色文本，在右边得到黑色文本，如第一个示例一样。

in this case i get what i'm supposed to get, but what i want is to get a white text on the left and a black text on the right, as in the first example.

i'一直在尝试使用CSS filter ， mix-blend-modes s， clip-path s，我已经看到了 https://aerolab.github.io/midnight。 js / （这不适合我的情况），但是我总是以错误的结果结尾。
$ b您知道吗？一种制作黑白色文本的方法，该文本可以识别白色背景，并且使文本变成黑色，而无论不是纯白色背景，都可以将颜色切换为白色？

i've been trying css filter, mix-blend-modess, clip-paths, i've seen this https://aerolab.github.io/midnight.js/ (it doesn't suit my case) but i always end up with the wrong result. do your know a way of making a black/white colored text that is aware of a white background and makes the text black and whatever is not a solid white background, switch the color to white?

我希望我的解释很清楚，即使需要使用JavaScript，也欢迎任何解决方案甚至线索。谢谢！

i hope my explanation was clear, any solutions or even clues are very welcome, even if it needs javascript. thank you!

这是一个带有示例的代码笔： https://codepen.io/vlrprbttst/pen/jOPMzvd?editors=1100

this is a codepen with the examples: https://codepen.io/vlrprbttst/pen/jOPMzvd?editors=1100

非常感谢！

推荐答案

我尝试了一些可行的方法。

I tried something that seems to work.

我在图像上以相同的宽度添加了一个黑色层（rgba，alpha 0.8），然后用过滤了图像的亮度过滤器：Brightness（3）;

I added one black layer (rgba with alpha 0.8) on top of your image with the same width, then filtered the brightness of your image with filter: brightness(3);

我不确定它是否以您想要的方式呈现图像。

I am not sure whether it renders the image the way you want.

body {
	 margin: 0;
	 padding: 0;
}
header.second {
	 height: 609px;
	 background-image: url("https://thedefiant.net/wp-content/uploads/2019/10/22520100_1600239116694701_7307954682775296386_o.jpg");
	 filter: brightness(3);
	 background-position: center left;
	 background-repeat: no-repeat;
	 background-size: 600px 100%;
	 background-color: #fff;
	 border: 1px solid red;
	 display: flex;
	 align-items: center;
	 padding-left: 390px;
	 position: relative;
}
header.second .mask {
	 position: absolute;
	 left: 0;
	 top: 0;
	 background-color: rgba(0, 0, 0, 0.8);
	 width: 600px;
	 height: 100%;
}
header.second .text {
	 position: relative;
	 color: white;
	 mix-blend-mode: difference;
	 text-transform: uppercase;
	 font-size: 60px;
}
 

<header class="second">
  <div class="mask"></div>
  <div>
    <div class="text" data-title="Sono caduto, ho pianto.">
      Sono caduto, ho pianto.
    </div>
  
    <div class="text" data-title="poi sono risalito">
      poi sono risalito
    </div>
  
    <div class="text" data-title="sei mejo te!">
      sei mejo te! sei mejo te!
    </div>
  </div>
</header>

这篇关于基于带有CSS的背景图像的黑白文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！