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

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>

- Murphy1976

Answer 1

您有两种使用混合模式的方法。

当在同一个元素中使用时，属性为background-blend-mode。

但是，当使用两个元素进行混合时，它是mix-blend-mode。

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;
}

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

- vals

---

混合模式的跨浏览器兼容性如何？ - Murphy1976

据我所知，CSS的background-blend-mode属性在除IE以外的现代浏览器中支持。详情请见http://caniuse.com/#feat=css-backgroundblendmode。 - vals

Answer 2

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

下面是一个例子： https://jsfiddle.net/4mgt8occ/3/ HTML

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

CSS

div.glass_sound {
            width:300px;
            height: 300px;
            background-size: 100%;
        }
.glass_sound {
                background-image: url('https://unsplash.imgix.net/photo-1430760814266-9c81759e5e55?dpr=2&fit=crop&fm=jpg&q=75&w=1050'), url('https://unsplash.imgix.net/photo-1431184052543-809fa8cc9bd6?dpr=2&fit=crop&fm=jpg&q=75&w=1050');
                background-blend-mode: multiply;
            }

- karanmhatre

---

这不是我想问的。我想知道是否可以让两个单独的元素继承混合模式，比如一个 div 乘以另一个 div。这就是为什么我把它们分开的原因。 - Murphy1976

你能解释一下这个使用案例的情况吗？我相信肯定有一个解决方法。 - karanmhatre

Answer 3

您可能需要使用background-blend-mode而不是blend-mode：

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;
}

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

- Praveen Kumar Purushothaman

---

@Murphy1976 现在看一下...已更新答案。 :D - Praveen Kumar Purushothaman

Photobucket的图片被我办公室的防火墙屏蔽了...但是我已经在我的声音div中添加了background-blend-mode，但仍然得到两个平面图像。 - Murphy1976

@Murphy1976 也可以看一下这个！https://css-tricks.com/basics-css-blend-modes/ - Praveen Kumar Purushothaman

我之前看过那个页面，所以我想知道混合模式是否可以在元素之间传递。那个页面中的所有示例都是在同一个元素中发生混合模式。 - Murphy1976

@Preveen，这就是我想问的。谢谢...我很担心这个。感谢你的帮助。 - Murphy1976