CODEWITHSUNDEEP
csshtmlblending
DigitalSky
DigitalSky

Reputation: 141

How to use mix-blend-mode, but not have it affect child elements?

Okay, so I'm building a WordPress site and the page in question can be seen here: http://test.pr-tech.com/power-line-markers/

The issue I am having is that I am using mix-blend-mode for one of my div containers to make use a 'lighten' blend on the background.

It works perfectly, but the issue I am having is that unfortunately the child elements inside the container (i.e. the text) are also inheriting the blend mode, and therefore it's making my text 'blend' as well, which isn't what I want (I want the text to have NO blend mode).

Anyways, you can see the code I am using below:

#category-intro-text {
    padding: 0.625em 0.938em;
    mix-blend-mode: lighten;
    background-color: rgba(220, 235, 255, 0.8); repeat;
}

I tried applying something like 'mix-blend-mode: none;' to the text, but that doesn't work.

I've searched Google for an answer to this pretty extensively, but alas, there isn't much on this topic (if anything at all).

Upvotes: 8

Views: 19653

Answers (4)

cak3_lover
cak3_lover

Reputation: 1968

How to use mix-blend-mode, but not have it affect child elements?

Building upon @shanem's answer I found this solution

function change(id){
  document.querySelector(id).style.backgroundColor="violet";
}
.group{
  height:10rem;
  width:10rem;
  position:absolute;
  visibility: hidden;
}
.group::before{
  content:"";
  visibility: visible;
  position:absolute;
  height:100%;
  width:100%;
  background-color:inherit;
  mix-blend-mode:multiply;
  z-index:-1;
}

.btn{
   background-color:red;
   color:white;
   visibility: visible;
   padding:0.5rem;
}
<div id="g1" class="group" style="background-color:cyan;">
  <input type="button" class="btn" value="change" onclick="change('#g1')"/>
</div>

<div id="g2" class="group" style="margin:1.5rem;background-color:yellow">
  <input type="button" class="btn" value="change" onclick="change('#g2')"/>
</div>

The best part is that you can directly change the background-color using javascript.
The only caveat (if you'd want to call it that) is that every child element must set visibility: visible;

Upvotes: 0

Abhishek Sachan
Abhishek Sachan

Reputation: 89

Why use mix-blend-mode when there's background-blend-mode(maybe you have already tried that!) for that purpose. Actually mix-blend-modes blends the element it is applied on with everything beneath it. On the other hand background-blend-mode applied on a background blends only with the the background that is beneath it.

You can do this- 

.outer-wrapper {
background: url(<url>), #fb3;
background-blend-mode: exclusion;
padding: 2em 4em;
}

.inner-text {
/**styling of you text***/
}

Upvotes: 3

shanem
shanem

Reputation: 153

I realise you asked this a while ago but I've been playing with the same issue today and managed to fix it like this.

Wrap the content inside the #category-intro-text div with another div that is positioned relatively. Ultimately, you'll want to add the style to your css and not inline as I've done here.

<div id="category-intro-text">
    <div style="position: relative;">   
        <h1>Power Line Markers</h1>
        Etc. Etc.
    </div>
</div>

Then remove the background colour and blending information you've got in the stylesheet for the #category-intro-text div. You should end up with...

#category-intro-text {
  padding: 0.625em 0.938em;
  position: relative;
}

Finally, use a ::before pseudo element to add the blended layer.

#category-intro-text::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(220, 235, 255,0.8);
  mix-blend-mode: lighten;
}

Hopefully that will do it. It is working perfectly for me with a multiply layer.

EDIT: Here is a Fiddle forked from the previous answer.

Upvotes: 12

Bitwise Creative
Bitwise Creative

Reputation: 4105

I thought I had it worked out with the isolation property, but no. I didn't have much luck researching a solution for this issue either.

I suppose you could use this old trick: http://jsfiddle.net/cwdtqma7/

HTML:

<div class="intro-wrap">
    <div class="intro-background"></div>
    <div class="intro-content">
        <h1>Hello</h1>
        <p>Welcome to the thing.</p>
    </div>
</div>

CSS:

body {
    background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/power-line-markers-bg.jpg') top left no-repeat;
    background-size: 800px;
    font-family: sans-serif;
}
.intro-wrap {
    position: relative;
}
.intro-background {
    background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/category-intro-bg.png');
    mix-blend-mode: lighten;
    padding: 32px;
    width: 300px;
    height: 300px;
}
.intro-content {
    position: absolute;
    top: 0;
    left: 32px;
}

Upvotes: 2

Related Questions