CODEWITHSUNDEEP
htmlcss
Tom
Tom

Reputation: 4043

Mix-blend-mode difference not working as expected

I have a black text overlapping a black div - I want to make the text's part, which is overlapping, white. Therefore I tried to use mix-blend-mode, but it's not working. How so?

Quick demo: 

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: black;
    font-size: 9rem;
    mix-blend-mode: difference;
    z-index: 1;
  }

  .centered-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(calc(-50% - 10vh)) translateX(-50%);
    width: 22.5rem;
    height: 30rem;
    background-color: black;
  }
<h1>This<br/>is a<br/>test</h1>
<div class="centered-block"/>

Upvotes: 0

Views: 141

Answers (1)

John
John

Reputation: 5335

You cannot do a mixed blend mode with black text.

If you have a white background, it is represented as rgb(255,255,255). If your text is black you would have a color of rgb(0,0,0), so if each column (color) is subtracted, and you get the absolute value, you get rgb(255,255,255), so the text would still be white on white. If your text is white rgb(255,255,255) and you subtract rgb(0,0,0) and get the absolute value, you get black on white. If your background was black rgb(0,0,0) and your text was white rgb(255,255,255), you get white text. If your text was black rgb(0,0,0) and your background is also black rgb(0,0,0), difference is rgb(0,0,0), so black over black (this is your example).

The simple answer, make your color: white;in h1. Also you need to set your body background color so your text has something to difference from while its not over anything (like how you still have black text in your example when it is over white, that wasn't because of the mixed blend mode, its because it had nothing to blend with.) so achieve it like this: 

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: white;
    font-size: 9rem;
    mix-blend-mode: difference;
    z-index: 1;
  }

  .centered-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(calc(-50% - 10vh)) translateX(-50%);
    width: 22.5rem;
    height: 30rem;
    background-color: black;
  }
  
  body {
  background-color: white;
  }
<h1>This<br/>is a<br/>test</h1>
<div class="centered-block"/>

Upvotes: 3

Related Questions