Text Blended Over Background Color

Text blended over background color

You can create another gradient to color the text without the use of mix-blend mode:

.container {
  width: 200px;
  height: 20px;
  background: linear-gradient(to right, #43a047 50%, #eee 0);
  text-align: center;
}

.text {
  background: linear-gradient(to right, white 50%, black 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

<div class="container">
  <div class="text">Some text here</div>
</div>

text background color overlay multiply on another image, but text stay solid white

This is the best I could do for a CSS only solution. Browser support is a little light as it uses:

background-blend-mode and
box-decoration-break

div {  display: inline-block;  position: relative;}p {  position: absolute;  width: 75%;  top: 50%;  left: 75%;  transform: translateY( -50% );}span {  display: inline;  padding: 0.25rem 0.5rem;  color: white;  font-family: Arial, sans-serif;  font-weight: bold;  line-height: 2rem;  background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==' );  -webkit-background-blend-mode: multiply;  background-blend-mode: multiply;  -webkit-box-decoration-break: clone;  -o-box-decoration-break: clone;  box-decoration-break: clone;}

<div>  <img src="http://lorempixel.com/300/250/people/6">  <p><span>Lorem ipsum dolor. Lorem ipsum dolor.</span></p></div>

Change text color based on its background

You could do something like this:

<style>
.container {
    display:block;
    position:relative;
    width:150px;
    height:50px;
    text-align: center;
}
.black-half div {
    background: #000;
    color: #fff;
}
.white-half div {
    background: #fff;
    color: #000;
    width:150px;
}
.white-half {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: absolute;
}
.black-half {
    height: 100%;
    position: absolute;
}
</style>

<div class="container">
  <div class="black-half">
      <div>Split background and text color</div>
  </div>
  <div class="white-half">
      <div>Split background and text color</div>
  </div>
</div>

Display text color based on background they are on

You can study mix-blend-mode CSS property. Here I've shared just an example. You should dive deep for understanding the blending.

.container {
  position: relative;
  width: 400px;
}
.wrapper {
  display: flex;
  
}

.left {
  background: #463c84;
  height: 100vh;
  width: 50%;
}
.right {
  background: white;
  width: 50%;
}


.header {
  flex: 1;
  position: absolute;
  top: 20%;
  left: 21%;
  background: inherit;
}

.header h1 {
  color: #fff;
  mix-blend-mode: difference;
}

<div class="container">
  <div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="header">
    <h1 class="blend">TEXT WITH INPIRATION</h1>
  </div>
</div>

How to decide the color of the text when using mix-blend-mode in CSS?

I do not think mix-blend-mode would be what you need here :

From your example you could do it otherwise with background attachement :

example of the idea:

body {
  margin: 0;
  display: flex;
}

.left {
  width: 200px;
  height: 200px;
  background: green;
}

.right {
  width: 200px;
  height: 200px;
  background: url('https://www.illicoveto.com/wp-content/uploads/sacre-de-birmanie.jpg');
  background-size: 200px;
}

.text {
  position: absolute;
  left: 100px;
  top: 70px;
  font-size: 50px;
  animation-name: animation;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  background: linear-gradient(90deg, black 200px, white 200px) fixed;
  color: transparent;
  background-clip: text;
}

@keyframes animation {
  0% {
    left: 100px;
  }
  50% {
    left: 140px;
  }
  100% {
    left: 100px;
  }
}

<div class="left"></div>
<div class="right"></div>
<div class="text">HELLO!</div>

Mix blend mode in reversing colors

mix-blend-mode doesn't works well with black.

Instead you should prefer to use white as the default color, and then apply an invert filter over the whole result.

This also means that you have to manually invert all the defined colors inside the container element.

And the easiest is probably to make your rectangle the mixing element, however, for it to not mix with the horizontal line, you'd need a new wrapper that will define the isolation.

Here is a simplified example:

.line-timeline {
  width: 100%;
  position: absolute;
  height: 5px;
  top: 50px;
  z-index: 3;
  background-color: black;
}
.isolator {
  isolation: isolate;
  filter: invert(100%);
}
.dot {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: -2.5px;
}
.dot.in {
  left: 50px;
}
.dot.out {
  left: 175px;
}
.dots5 a span {
  position: absolute;
  color: #000;
  background: white;
  padding: 48px;
  height: 50px;
  width: 150px;
  display: block;
  text-align: center;
  clip-path: polygon(50% 0, 100% 41%, 100% 100%, 0 100%, 0 43%);
}
.dots5 a {
  position: relative;
}
.black-segment {
  height: 60px;
  width: 150px;
  position: absolute;
  top: -15px;
  background-color: white;
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 10;
}

<div class="line-timeline">
  <div class="isolator">
    <!-- we use an isolator to not let our black rectangle mix with the horizontal line -->
    <div class="black-segment"></div>
    <div class="dot in"></div>
    <div class="dot out"></div>
    <div class="dots dots5"> <a class="hover-me" href="#"> a<span >Hello, World!</span></a></div>
  </div>
</div>

Text Blended Over Background Color