"Exclude text from blending" CSS-blending

Question

I am making a website for one of our clients. Our designers used blending: multiply because it can be done in CSS these days. I have implemented it in the site but I can't get the requested result and just wanted to ask you people if it even possible.

Here's the case: I have a big header with images in the background. On top of that header floats a round div which has mix-blend-mode: multiply. This works as desired, but in this div there is text which is also blended. Can I keep this text "unblended"?

desired effect:
wanted effect

What it is now:
current situation

Thanks in advance!

Please provide the fiddle or live link where we can see the issue in action then we can help. — Leo the lion, May 03 '16 at 13:04
Possible duplicate of [Remove mix-blend-mode from child element](http://stackoverflow.com/questions/31629541/remove-mix-blend-mode-from-child-element) — Edu, May 03 '16 at 13:20

score 7 · Accepted Answer · answered May 03 '16 at 13:22

Use a pseduo-element and apply the blend-mode to that instead of the parent div.

div.header {
  width: 100%;
  height: 300px;
  background-image: url(http://www.eikongraphia.com/wordpress/wp-content/BIG_Zira_Island_Copyright_BIG_1_Small.jpg);
}
div.info-bol {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  text-align: center;
  position: relative;
}
div.info-bol::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: red;
  mix-blend-mode: multiply;
}
div.info-bol span {
  position: relative;
  top: 22%;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

<div class="header">
  <div class="info-bol">
    <span>samenwerken<br>is meer dan<br>samen<br>werken</span>
  </div>
</div>

Thanks for reacting so fast! This solution solves my problem! — Bounder, May 03 '16 at 13:26

score 0 · Answer 2 · answered May 03 '16 at 13:26

You must take the span out, because mix-blend-mode affects all children.

You can try something like creating a clone, without background, and pushing it into position.

div.header{
  width: 100%;
  height: 300px;
  background-image: url(http://www.eikongraphia.com/wordpress/wp-content/BIG_Zira_Island_Copyright_BIG_1_Small.jpg);
}

div.info-bol{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: red;
  mix-blend-mode: multiply;
  text-align: center;
  color: #fff;
}

div.info-bol-clone{
  position: relative;
  width: 200px;
  height: 200px;
  text-align: center;
  color: #fff;
  bottom: 200px;
}

div.info-bol-clone span{
  position: relative;
  top: 22%;
  font-size: 30px;
  font-weight: bold
}

<div class="header">
  <div class="info-bol">
  </div>  
  <div class="info-bol-clone">
    <span>samenwerken<br>is meer dan<br>samen<br>werken</span>
  </div>  
</div>

"Exclude text from blending" CSS-blending

2 Answers2