Я хочу смешать цвет фона элемента с фоновым изображением родительского элемента.
Если для свойства css background-blend-mode
установлено значение multiply
, оно будет работать только в том случае, если цвет и изображение установлены для одного и того же элемента.
.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>
Но я хочу использовать разные цвета, смешанные на одном и том же фоновом изображении, поэтому мне придется смешивать фоновое изображение с цветами детей. Есть ли способ добраться туда?