Question

我很清楚答案是什么，但我只想绝对肯定。

我有两个元素，div.glass和div.sound，都包含背景图片。是否可以将混合模式设置为每个div，以便它们相互交互？例如：

div.glass,
div.sound {
  width: 597px;
  height: 154px;
  position: absolute;
}
div.glass {
  background: url(glass.png) 0 0 no-repeat;
  z-index: 9;
  top: 5px;
  left: 5px;
}
div.sound {
  background: url(soundwave.png) 0 0 no-repeat;
  z-index: 10;
  blend-mode: multiply;
  top: 50px;
  left: 300px;
}
div.container {
  position: relative;
}

<div class="container">
  <div class="glass"></div>
  <div class="sound"></div>
</div>

Answer 1

您有两种方法可以使用混合模式

在同一元素中执行此操作时，属性为background-blend-mode。

但是，当用2个元素做它时。它是混合混合模式

＆＃13;

div.glass,
div.sound {
  width: 597px;
  height: 154px;
  position: absolute;
}
div.glass {
  background: url(http://placekitten.com/1200/900) 0 0 no-repeat;
  z-index: 9;
  top: 5px;
  left: 5px;
}
div.sound {
  background: url(http://placekitten.com/1000/750) 0 0 no-repeat;
  z-index: 10;
  mix-blend-mode: difference;
  top: 50px;
  left: 300px;
}
div.container {
  position: relative;
}

＆＃13;

<div class="container">
  <div class="glass"></div>
  <div class="sound"></div>
</div>

＆＃13;

Answer 2

您可能需要使用background-blend-mode代替blend-mode：

＆＃13;

div.glass,
div.sound {
  width: 597px;
  height: 154px;
  position: absolute;
}
div.glass {
  background: url("http://i656.photobucket.com/albums/uu288/dragon-g/glass.png") 0 0 no-repeat;
  z-index: 9;
  top: 5px;
  left: 5px;
}
div.sound {
  background: url("http://vignette3.wikia.nocookie.net/youngjustice/images/e/ee/Sound.png/revision/latest?cb=20130330173251") 0 0 no-repeat;
  z-index: 10;
  background-blend-mode: multiply;
  top: 50px;
  left: 300px;
}
div.container {
  position: relative;
}

＆＃13;

<div class="container">
  <div class="glass"></div>
  <div class="sound"></div>
</div>

＆＃13;

Answer 3

您可以为单个div添加两个背景。这样，您可以使用'background-blend-mode'属性来混合两个图像。

这是一个例子： https://jsfiddle.net/4mgt8occ/3/

<强> HTML

toLowerCase(String s)

<强> CSS

<div class="container">
  <div class="glass_sound"></div>
</div>

CSS3 - 不同HTML元素之间的混合模式

3 个答案: