如何将css混合模式应用于不同的层？＃34;

Question

我有一个蓝图，我想绝对定位div，以突出显示某些房间。

使用alpha通道（rgba），我仍然可以看到蓝图＆＃34;墨水＆＃34;在下面，但根据颜色饱和度，图形变得模糊。

我知道我可以在包含蓝图的div上使用background-blend-mode: multiply以获得所需的效果，但它会将其应用于整个图像，因为我必须在其上指定颜色和图像DIV。这很难解释，但很容易显示，所以我在这里用paint.net嘲笑它：

同样，我可以使用background-blend-mode获得所需的外观，但会将其应用于整个背景图像。我希望div中的颜色为multiply下面的所有内容。

Answer 1

好吧，我开始写这个问题并发现它是一个浏览器支持问题。我最终找到了mix-blend-mode，它将混合模式应用于div /元素下面的所有内容，不幸的是，Chrome（截至今天）不支持它。然而，Firefox确实如此。可以在chrome中打开chrome到chrome：// flags /并启用“实验性Web平台功能”。

我发现以下链接一般非常有用，我只是没有意识到他们谈论的是背景混合模式和混合混合模式。 http://css-tricks.com/basics-css-blend-modes/

以下是在firefox中使用它的截图：

Answer 2

另一种方法是使用背景混合模式，并使用背景图像属性。

这不是一个非常好的解决方案，但可以让您在等待Chrome下一个版本之前

＆＃13;

＆＃13;

.test {
   width: 400px;
  height: 200px;
  background-image: linear-gradient(lightgreen, lightgreen), url(http://i.stack.imgur.com/DfAyW.png);
  background-blend-mode: multiply;
  background-size: 100px 140px, cover;
  background-position: 10px 40px, 0px 0px;
  background-repeat: no-repeat;
  }

＆＃13;

<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;