CSS：如何同时使用混合模式和过滤器答案

【问题标题】：CSS: How to use blend-mode and filter at onceCSS：如何同时使用混合模式和过滤器
【发布时间】：2015-03-09 01:36:29
【问题描述】：

我需要通过拍摄全彩照片来完成图像风格，并且：

灰度化
降低黑电平（可以通过降低不透明度或亮度来实现）
在蓝色之上应用“乘”混合模式

到目前为止，我只能做其中之一（乘法和灰度或不透明度/级别）

知道如何在 img 元素或背景图像上同时使用这两种方法吗？

Codepen：http://codepen.io/jeremypbeasley/pen/vENBqO

当前的 CSS：

body {
    margin:50px;
}

.test:parent {
    overflow:auto;
    background:#0c98f2;
    width:500px;
    height:320px;
}

.test {
    background-image:url(http://f.cl.ly/items/0z1I403f1a3O3v0o0l2b/PageImage-531144-5235316-finalselectsjared12.jpg);
    background-size:cover;
    background-blend-mode:multiply,normal;
    background-color:#0c98f2;
    opacity:.5;
    width:500px;
    height:320px;
}

img {
    width:500px;
}

【问题讨论】：

blend-mode 不需要两张背景图片吗？无论如何，过滤器适用于内联图像，而混合模式适用于 bg 图像。这两个属性不交互，因为它们需要不同的“对象”。 AFAIK
@Paulie_D 关于“对象”是对的，我想我想知道是否有人知道如何“破解”并使其发挥作用。
你不能破解两个不同的东西。我认为你的目标超过了 CSS。
也就是说，也许你需要的实际上是一个覆盖 - codepen.io/Paulie-D/pen/YPyPgO?editors=010

标签： jquery html css

【解决方案1】：

您可以在 CSS 中一一重现您的所有步骤

a) 将其设为灰度。将图像应用到黑色背景上，使用亮度作为滤镜

b) 降低黑电平。应用灰色图层，带有混合模式屏幕

c) 应用模式乘法的蓝色层。

在 sn-p 中，b) 步骤是使用渐变完成的，因此您可以看到不同数量的黑色减少量。（灰色越浅，效果越大）

.demo {
    width: 400px;
    height: 450px;
    background: linear-gradient(blue, blue), linear-gradient(90deg, black, gray), url("http://media.virbcdn.com/cdn_images/resize_1600x1600/4c/PageImage-531144-5235316-finalselectsjared12.jpg"); 
    background-color: black;
    background-size: cover;
    background-blend-mode: multiply, screen, luminosity;
}

&lt;div class="demo"&gt;&lt;/demo&gt;

【讨论】：