0

是否可以将 css 混合模式应用于不同 div 中的元素？

例如，我在一个 div 中有一个大的背景英雄图像。在该图像上方（在不同的 div 中）我有一个蓝色的半透明框，其中包含文本。这个透明框是我想应用混合的，但它似乎不起作用，可能是因为它们不在同一个 div 中，就像示例https://css-tricks.com/basics-css-blend-模式/

我在 wordpress 中工作，因此重新构造 HTML 以便将图像和彩色框放在同一个 div 中会有点困难。

有人知道我可以用来实现这种方法的技巧吗？

提前致谢！

在此处输入图像描述

4

3 回答 3

1

使用mix-blend-mode.

演示：

http://plnkr.co/edit/R5TBohMs1jKfsPj7zcXt?p=preview

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

  1. background-blend-mode: 如果两个背景都在同一个 div 中，那么可以使用这个属性。

  2. mix-blend-mode：当你想混合2个不同元素的背景时，你可以使用该mix-blend-mode属性。

代码：

HTML：

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>

CSS：

div.wrapper {
  position: relative;
}
div.first,
div.second {
  width: 300px;
  height: 200px;
  position: absolute;
}
div.first {
  background: url(http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg) 0 0 no-repeat;
  z-index: 9;
  top: 0px;
  left: 0px;
}
div.second {
  background: url(http://images.all-free-download.com/images/graphicthumb/canford_school_drive_dorset_514492.jpg) 0 0 no-repeat;
  z-index: 10;
  mix-blend-mode: difference;
  top: 30px;
  left: 120px;
}
于 2016-10-18T04:40:35.643 回答
0

您可以使用 :after 或 :before 在 img-div 中创建另一个元素。然后用 设置背景颜色rgba()。这里0.2是背景颜色的不透明度。对于文本 div，您无需对其执行任何操作。

div#wrapper::after {
    background-color: rgba(216, 223, 228, 0.2);
    display: block;
    width: 100%;
    height: 100%;
    content: ' ';
}
于 2016-10-18T04:49:50.010 回答
0

这是一个技巧：

您可以将两个 div 添加到一个 div 中。然后在 css 中可以为单个 div 添加两个背景。这样，您可以使用该background-blend-mode属性来混合两个图像。

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

于 2016-10-18T04:30:14.063 回答