0

Is there a way to do a knockout text effect using mix-blend-mode with grandparent instead of parent?

  • The :grandparent is just an example of what I am trying to do

Here is my html and css:

<span class="screen">lorem</span>

.screen {
    color: black;
    mix-blend-mode: screen;
    background-color: inherit:grandparent;
  }
Spectric
  • 5,761
  • 2
  • 6
  • 27
Simon Ruelland
  • 3
  • 1
  • Not sure what you mean by selecting the grandparent background color. [There is no CSS parent selector](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Spectric May 16 '21 at 00:59

1 Answers1

0

mix-blend-mode:multiply; is your friend. For getting the grandparent's background color, the best you can do is inherit it.

.screen {
  color:white;
  background-color:black;
  mix-blend-mode:multiply;
  font-size:50px;
}
.container{
  background:inherit;
}
.grandparent {
  background: linear-gradient(90deg, red, green);
  width:fit-content;
}
<div class="grandparent">
<div class="container">
  <span class="screen">lorem</span>
</div>
</div>
Spectric
  • 5,761
  • 2
  • 6
  • 27
  • I forgot to mention, I am trying to add a white background around the text, but keep the body image the same and the text transparent so we can see the text through the white. For example, the .grandparent in your example would be an image, the .container would be white and the text would be transparent, so the text color would in fact be the a part of the grandparent's image. – Simon Ruelland May 16 '21 at 11:28