CODEWITHSUNDEEP
htmlcssmix-blend-mode
Vadim Badea
Vadim Badea

Reputation: 449

How to manipulate text color with mix-blend-mode

I'm trying to manipulate the text color with mix-blend-mode in CSS. I have some content that goes on top of the image, the color of the text is white, my image has a white shape. When the text is on top of the shape I want to blend the text.

I have tried a few tests and I get the result I want, if I apply the mix-blend-mode on the body, but not on the element. I can't use the mix-blend-mode on body, is there a way to get the same result, but without using mix-blend-mode on body?

CSS:

body {
  background-color: #607bff;
  mix-blend-mode: screen;
}
.biography {
  margin: 0;
  width: 100%;
  max-width: 770px;
  position: relative;
}
.biography img {
    max-width: 100%;
}
.biography .biography-text {
  position: absolute;
  top: -330px;
  left: 400px;
}

.biography-text {
    color: #fff;
    mix-blend-mode: difference;
}

Please have a look on the Codepen here, or the JSFiddle here, you will see the result I want.

PS: I need to give the text a different color (eg. blue), when it's on top of the white shape.

Upvotes: 1

Views: 9187

Answers (1)

Paulie_D
Paulie_D

Reputation: 115066

Wrap everything in a master div and apply the blend mode to that rather than the body.

Just be aware that blend-mode has no IE support so you may need a fallback for that broswer set. I would suggest a small black text-shadow.

body {
  background-color: #607bff;
}
.wrap {
  mix-blend-mode: screen;
}
.biography {
  margin: 0;
  width: 100%;
  max-width: 770px;
  position: relative;
}
.biography img {
  max-width: 100%;
}
.biography .biography-text {
  position: absolute;
  top: -330px;
  left: 400px;
}
.biography-text {
  color: #fff;
  mix-blend-mode: difference;
}
<div class="wrap">
  <img src="http://s18.postimg.org/7fq7hbjzd/author_photo.png" alt="author" class="bio-img">
  <div class="biography">
    <div class="biography-text">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        <br>Vestibulum pellentesque auctor quam a sollicitudin.
        <br>Pellentesque accumsan a sem eget dictum.
      </p>
      <p>
        Morbi dictum lorem tortor, id consequat libero gravida ut.
        <br>Nullam dictum sed massa et bibendum.
      </p>
      <p>Praesent sed dui mattis, dictum urna sit amet, imperdiet purus.</p>
      <p>Suspendisse potenti.</p>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions