Смешивание цвета фона дочернего элемента с фоновым изображением родительского элемента с помощью CSS - PullRequest
Новая
       96

Смешивание цвета фона дочернего элемента с фоновым изображением родительского элемента с помощью CSS

2 голосов
/ 20 июня 2019

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

1 Ответ

3 голосов
/ 20 июня 2019

это mix-blend-mode не background-blend-mode 1 

.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 Определяет режим смешивания каждого фонового слоя .

Каждый фоновый слой должен сливаться с фоновым слоем элемента, который находится под ним, и цветом фона элемента. Фоновые слои не должны смешиваться с содержимым, которое находится за элементом , вместо этого они должны действовать так, как будто они отображаются в изолированной группе. ref

...