2

我想将元素的背景颜色与父元素的背景图像混合。将 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>

4

1 回答 1

4

这mix-blend-mode 不是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在有多个背景时使用。所以你可以像下面这样写上面的内容：

.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>

1定义每个背景层的混合模式。

每个背景层必须与其下方元素的背景层和元素的背景颜色混合。背景层不能与元素后面的内容混合，相反，它们必须表现得好像它们被渲染到一个孤立的组中一样。参考

于 2019-06-20T15:29:51.510 回答