Mix blend mode background with child content unaffected

Question

I am trying to use mix-blend-mode to create a background with a multiply effect overlay that also reveals part of the background. I also need the child content not to be affected by the blend mode. Like this:

I've tried setting the blend-mode to unset, I've also tried using isolation / isolate but can't seem to get that option to work. I don't want to use pseudo elements or placing the content outside of the parent element as the actual layout from the designer has a lot of content and I need it to be responsive.

What I've been able to get working so far: I can get the background and overlay working but the affect applies to the content layer also: https://codepen.io/orlafitz/pen/JVRQpM

    .bkg-image {
      background-image: url(https://poppyvine.com/wp-content/uploads/2019/04/beach-bw.jpg);
      text-align: center;
      padding: 100px 0px;
      background-size: cover;
      background-position: center;
    }
    
    
    .multiply-overlay {
        background-color: #323ff0;
        mix-blend-mode: multiply;
        padding: 50px
    }
    
    .bkg-image .content {
      color: #fff;
      isolation: isolate;
    
    }

    <div class="bkg-image">
      <div class="multiply-overlay">
        <div class="content">
        <h1>Margins to show bkg img<br>&<br>Content unaffected by blend mode</h1>
        </div><!-- content -->
      </div><!-- multiply-overlay-->
    </div><!-- bkg img -->

Does anyone know if it is possible to achieve this?

Why not pseudo element?? – Joykal Infotech Apr 08 '19 at 12:12 — Joykal Infotech, Apr 08 '19 at 12:12

score 3 · Answer 1 · answered Apr 08 '19 at 12:30

.bkg-image {
  background-image: url(https://poppyvine.com/wp-content/uploads/2019/04/beach-bw.jpg);
  text-align: center;
  padding: 100px 0px;
  background-size: cover;
  background-position: center;
}

.overlay {
  position: relative;
  padding: 50px
}

.background {
    background-color: #323ff0;
    mix-blend-mode: multiply;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.content {
    position: relative;
}

.bkg-image .content h1 {
  color: white;
  isolation: isloate;
}

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
<title>Test Blend Modes</title>
</head>
<body>

<h2>Live:</h2>

<div class="bkg-image">
  <div class="overlay">
     <div class="background"></div>
     <div class="content">
    <h1>Margins to show bkg img<br>&<br>Content unaffected by blend mode</h1>
    </div><!-- content -->
  </div><!-- multiply-overlay-->
  
</div><!-- bkg img -->

<h2>Should look like:</h2>

<img class="screencap" src="https://poppyvine.com/wp-content/uploads/2019/04/beach.jpg">

</body>
</html>

Anything inside the blended element will be blended, so they need to be siblings.

Thank you for the reply, the full layout requires a large dynamic content area so I'd prefer not to have to do too much positioning - will keep this in mind incase the other method doesn't work out in production. — orlafitz, Apr 08 '19 at 13:48

Temani Afif · Accepted Answer · 2019-04-08T12:35:41.140

As I already explained in this previous answer, isolation will not work this way and you cannot isolate the content after applying mix-blend-mode

On idea of fix is to consider background-blend-mode with multiple background. This will only affect the background and not the content and you will have a reduced code.

.bkg-image {
  background: 
    linear-gradient(#323ff0,#323ff0) center/100% calc(100% - 100px) no-repeat,
    url(https://poppyvine.com/wp-content/uploads/2019/04/beach-bw.jpg) center/cover;
  text-align: center;
  background-blend-mode: multiply;
  padding: 100px 0px;
}

.bkg-image .content {
  color: #fff;
}

<div class="bkg-image">
    <div class="content">
      <h1>Margins to show bkg img<br>&<br>Content unaffected by blend mode</h1>
    </div>
</div>

Another related question: Isolation with CSS Mix-Blend-Modes: how to prevent elements from blending with parent

The solution using pseudo element: Mix blend mode multiply while keeping text opaque?

Thank you - I had tried using background-blend-mode but couldn't get the margins to work - using background calc completely solves that issue in a much more straight forward way! Also thank you for the additional links - they are really helpful :-)! — orlafitz, Apr 08 '19 at 13:44

Mix blend mode background with child content unaffected

2 Answers2

Related