Mixing background-color of an child with the background-image of the parent element with CSS

user_4153320 0
Viewed 834

I want to mix the background color of an element with the background image of the parent element. With the css property "background-blend-mode" set to "multiply" it works only if color and image are set on the same element. But I want to archive different colors getting mixed on the same background image - so I would have to mix the background image with the colors of the childrens. Is there a way to get there?

.bg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TtSIVBzuIOGSoThb8KOKoVShChVArtOpgcumH0KQhSXFxFFwLDn4sVh1cnHV1cBUEwQ8QF1cnRRcp8X9JoUWMB8f9eHfvcfcOEOplplkdY4Cm22Y6mRCzuRUx9IouRBBGHOMys4xZSUrBd3zdI8DXuxjP8j/35+hV8xYDAiLxDDNMm3ideGrTNjjvE0dYSVaJz4lHTbog8SPXFY/fOBddFnhmxMyk54gjxGKxjZU2ZiVTI44TR1VNp3wh67HKeYuzVq6y5j35C8N5fXmJ6zSHkMQCFiFBhIIqNlCGjRitOikW0rSf8PEPun6JXAq5NsDIMY8KNMiuH/wPfndrFSYnvKRwAuh8cZyPYSC0CzRqjvN97DiNEyD4DFzpLX+lDkx/kl5radEjoG8buLhuacoecLkDDDwZsim7UpCmUCgA72f0TTmg/xboWfV6a+7j9AHIUFepG+DgEBgpUvaaz7u723v790yzvx/Ct3LHCx725AAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAGxJREFUaN7t1bEJwDAMBVE5ZBLtv5K8itKatC4Sw/udUHVwcKOqOpZl5nrGnDP+/L/i8AH4eqO7+yTn338KAdjcfZrzOgBAB3QAgA5QCIAOUAiADlAIgA5QCIAOUAiADlAIgA5QCIAOUAjA1h7zMO7kJjvXlwAAAABJRU5ErkJggg==);
}

.mixit-green {
  background-color: #ddffdd;
  background-blend-mode: multiply;
  padding: 50px;
}

.mixit-blue {
  background-color: #ddddff;
  background-blend-mode: multiply;
  padding: 50px;
}
<div class="bg">
  <div class="mixit-green"></div>
  <div class="mixit-blue"></div>
</div>

mix-blend-mode background-color background background-image css
1 Answers

it's mix-blend-mode not background-blend-mode1

.bg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TtSIVBzuIOGSoThb8KOKoVShChVArtOpgcumH0KQhSXFxFFwLDn4sVh1cnHV1cBUEwQ8QF1cnRRcp8X9JoUWMB8f9eHfvcfcOEOplplkdY4Cm22Y6mRCzuRUx9IouRBBGHOMys4xZSUrBd3zdI8DXuxjP8j/35+hV8xYDAiLxDDNMm3ideGrTNjjvE0dYSVaJz4lHTbog8SPXFY/fOBddFnhmxMyk54gjxGKxjZU2ZiVTI44TR1VNp3wh67HKeYuzVq6y5j35C8N5fXmJ6zSHkMQCFiFBhIIqNlCGjRitOikW0rSf8PEPun6JXAq5NsDIMY8KNMiuH/wPfndrFSYnvKRwAuh8cZyPYSC0CzRqjvN97DiNEyD4DFzpLX+lDkx/kl5radEjoG8buLhuacoecLkDDDwZsim7UpCmUCgA72f0TTmg/xboWfV6a+7j9AHIUFepG+DgEBgpUvaaz7u723v790yzvx/Ct3LHCx725AAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAGxJREFUaN7t1bEJwDAMBVE5ZBLtv5K8itKatC4Sw/udUHVwcKOqOpZl5nrGnDP+/L/i8AH4eqO7+yTn338KAdjcfZrzOgBAB3QAgA5QCIAOUAiADlAIgA5QCIAOUAiADlAIgA5QCIAOUAjA1h7zMO7kJjvXlwAAAABJRU5ErkJggg==);
}

.mixit-green {
  background-color: #ddffdd;
  mix-blend-mode: multiply;
  padding: 50px;
}

.mixit-blue {
  background-color: #ddddff;
  mix-blend-mode: multiply;
  padding: 50px;
}
<div class="bg">
  <div class="mixit-green"></div>
  <div class="mixit-blue"></div>
</div>

background-blend-mode is used when having multiple background. So you can write the above like below:

.bg {
  padding:100px;
  background-image:
    linear-gradient(#ddffdd 50%,#ddddff 0),
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TtSIVBzuIOGSoThb8KOKoVShChVArtOpgcumH0KQhSXFxFFwLDn4sVh1cnHV1cBUEwQ8QF1cnRRcp8X9JoUWMB8f9eHfvcfcOEOplplkdY4Cm22Y6mRCzuRUx9IouRBBGHOMys4xZSUrBd3zdI8DXuxjP8j/35+hV8xYDAiLxDDNMm3ideGrTNjjvE0dYSVaJz4lHTbog8SPXFY/fOBddFnhmxMyk54gjxGKxjZU2ZiVTI44TR1VNp3wh67HKeYuzVq6y5j35C8N5fXmJ6zSHkMQCFiFBhIIqNlCGjRitOikW0rSf8PEPun6JXAq5NsDIMY8KNMiuH/wPfndrFSYnvKRwAuh8cZyPYSC0CzRqjvN97DiNEyD4DFzpLX+lDkx/kl5radEjoG8buLhuacoecLkDDDwZsim7UpCmUCgA72f0TTmg/xboWfV6a+7j9AHIUFepG+DgEBgpUvaaz7u723v790yzvx/Ct3LHCx725AAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAGxJREFUaN7t1bEJwDAMBVE5ZBLtv5K8itKatC4Sw/udUHVwcKOqOpZl5nrGnDP+/L/i8AH4eqO7+yTn338KAdjcfZrzOgBAB3QAgA5QCIAOUAiADlAIgA5QCIAOUAiADlAIgA5QCIAOUAjA1h7zMO7kJjvXlwAAAABJRU5ErkJggg==);
  background-blend-mode: multiply;
}
<div class="bg">
</div>

1Defines the blending mode of each background layer.

Each background layer must blend with the element’s background layer that is below it and the element’s background color. Background layers must not blend with the content that is behind the element, instead they must act as if they are rendered into an isolated group. ref

user_86203330
Related