title: Mix blend mode background with child content unaffected
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/Ivqsf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ivqsf.jpg" alt="mix-blend-mode with child content unaffected"></a></p>
  
  <p>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.</p>
  
  <p><strong>What I've been able to get working so far:</strong> 
  I can get the background and overlay working but the affect applies to the content layer also: 
  <a href="https://codepen.io/orlafitz/pen/JVRQpM" rel="nofollow noreferrer">https://codepen.io/orlafitz/pen/JVRQpM</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .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;
      
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="bkg-image"&gt;
        &lt;div class="multiply-overlay"&gt;
          &lt;div class="content"&gt;
          &lt;h1&gt;Margins to show bkg img&lt;br&gt;&amp;&lt;br&gt;Content unaffected by blend mode&lt;/h1&gt;
          &lt;/div&gt;&lt;!-- content --&gt;
        &lt;/div&gt;&lt;!-- multiply-overlay--&gt;
      &lt;/div&gt;&lt;!-- bkg img --&gt;  </code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anyone know if it is possible to achieve this?</p>