＆＃34;从混合中排除文字＆＃34; CSS-共混

Question

我正在为我们的一位客户建立一个网站。我们的设计师使用混合：乘法，因为它可以在CSS中完成。我已经在网站上实现了它，但我无法获得所要求的结果，只是想问问人们是否有可能。

在这种情况下：我在背景中有一个带有图像的大标题。在该标题的顶部浮动一个圆形div，它具有mix-blend-mode：multiply。这可以按照需要工作，但是在这个div中还有混合的文本。我可以保留这段文字＆＃34; unblended＆＃34;？

期望的效果：

现在是什么：

提前致谢！

Answer 1

使用pseduo-element并将blend-mode应用于该而不是父div。

div.header {
  width: 100%;
  height: 300px;
  background-image: url(http://www.eikongraphia.com/wordpress/wp-content/BIG_Zira_Island_Copyright_BIG_1_Small.jpg);
}
div.info-bol {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  text-align: center;
  position: relative;
}
div.info-bol::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: red;
  mix-blend-mode: multiply;
}
div.info-bol span {
  position: relative;
  top: 22%;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

<div class="header">
  <div class="info-bol">
    <span>samenwerken<br>is meer dan<br>samen<br>werken</span>
  </div>
</div>

Answer 2

您必须缩小范围，因为mix-blend-mode会影响所有儿童。

你可以尝试创建一个没有背景的克隆，并将其推到适当的位置。

＆＃13;

＆＃13;

div.header{
  width: 100%;
  height: 300px;
  background-image: url(http://www.eikongraphia.com/wordpress/wp-content/BIG_Zira_Island_Copyright_BIG_1_Small.jpg);
}

div.info-bol{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: red;
  mix-blend-mode: multiply;
  text-align: center;
  color: #fff;
}

div.info-bol-clone{
  position: relative;
  width: 200px;
  height: 200px;
  text-align: center;
  color: #fff;
  bottom: 200px;
}

div.info-bol-clone span{
  position: relative;
  top: 22%;
  font-size: 30px;
  font-weight: bold
}

＆＃13;

<div class="header">
  <div class="info-bol">
  </div>  
  <div class="info-bol-clone">
    <span>samenwerken<br>is meer dan<br>samen<br>werken</span>
  </div>  
</div>

＆＃13;

＆＃13;

＆＃13;