javascript - black and white text based on background image with css - Stack Overflow

admin管理员组

文章数量:1400572

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).

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've been trying css filter, mix-blend-modess, clip-paths, i've seen this .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?

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

this is a codepen with the examples:

thanks so much!

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).

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'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?

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

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

thanks so much!

• javascript
• css
• clip-path
• css-filters
• mix-blend-mode

Share Improve this question Follow asked Feb 20, 2020 at 15:35 valerio0999valerio0999 12.1k77 gold badges3232 silver badges5757 bronze badges 1

• Does this answer your question? Text blended over background color – SMAKSS Commented Jun 2, 2020 at 10:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can consider a gradient coloration for the text but you need to know the dimension of the image in order to correct set the values.

Here is an example with only the first section:

body {
  margin: 0;
  padding: 0;
}

header {
  height: 609px;
  background: 
   url("http://resources.doing./aaa/a.png") center right/auto 100% no-repeat;
  background-color: #fff;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 90px;
}

header>div {
  background: linear-gradient(to right, black calc(100% - 880px), white 0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text {
  text-transform: uppercase;
  font-size: 60px;
}

<header>
  <div>
    <div class="text" data-title="Elisa di Francisca">
      Elisa di Francisca
    </div>

    <div class="text" data-title="tenacia e determinazione">
      tenacia e determinazione
    </div>

    <div class="text" data-title="di una mamma in pedana">
      di una mamma in pedana
    </div>
  </div>
</header>

I tried something that seems to work.

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/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>

本文标签： javascriptblack and white text based on background image with cssStack Overflow