CSS灰度过滤器和背景混合模式？

alen0pnh 于 2022-12-01 发布在其他

关注(0)|答案(3)|浏览(199)

我尝试用Photoshop文件中的方法来处理图像a-将图像的饱和度降低到灰度，然后用多重混合模式应用颜色叠加。为此，我用...

.someclass
{
    /* grayscale */
    -webkit-filter: grayscale(1); 
    filter: gray; 
    filter: grayscale(1);
    filter: url(desaturate.svg#greyscale);

    /* multiply */
    background-color: rgba(190, 50, 50, 0.65);
    background-blend-mode: multiply;
}

这样做的问题是，灰度滤镜最终会降低混合模式的红色饱和度。换句话说，先进行乘法，然后是灰度。如何切换它，以便先应用灰度，然后再应用混合模式？
我已经为代码创建了一个小提琴（http://jsfiddle.net/g54LcoL1/1/）和一个截图（在Photoshop中制作），我希望小提琴的结果看起来像。最底部的图像，div.grayscale.multiply，应该是红色的。

css

来源：https://stackoverflow.com/questions/25836628/css-grayscale-filter-and-background-blend-mode-at-same-time

3条答案

按热度按时间

bfnvny8b1#

你不能用滤镜，但你可以用混合模式来做
混合中的灰度等效值是亮度，图像作为源，纯白色作为背景
因此，背景图像从下到上依次为：
1.白色（作为背景色）
1.您的图像
1.纯红色（现在必须指定为渐变）
混合模式是亮度和多重
第一个

赞(0）回复(0）举报 2022-12-01

rqmkfv5c2#

混合模式应用于背景图层，然后滤镜应用于整个元素，因此它们处理的是两种不同的事情：在计算出背景（包括略带红色的外观）时，整个元素被滤波器转换为灰度级。
有一个针对图像引用的filter（）函数，所以理论上，你应该能够在加载任何图像时对它应用一个滤镜。我认为这是一个想法：

.someclass {
    background-image: filter(cat.jpg, grayscale(100%));
    background-color: red;
    background-blend-mode: multiply;
}

遗憾的是，我认为这还没有在任何地方实现，它只是在过滤器规范的草案版本中。
一般而言，按照与SVG相同的顺序来定义这些类型的“后处理”CSS效果的操作顺序：首先进行滤波，然后进行限幅，然后进行掩模，然后进行混合。
(See混合与合成规范。）所以，恐怕你无法改变这一点。

赞(0）回复(0）举报 2022-12-01

drnojrws3#

正如Joel在他的评论中提到的，使用mix-blend-mode是可能的。
在我的例子中，我将使用一个实际的图像而不是背景图像，因为这样更便于访问。如果它必须是一个背景图像，那么您仍然可以使用相同的技术。将图像替换为一个空的div，其背景图像样式如下所示：

<!-- Not the recommended HTML, see the other examples for better HTML -->
<div class="image-wrapper">
    <div class="image" style="background: url('https://static.decalgirl.com/assets/designs/large/clrkit.jpg') no-repeat; height: 100px; width: 100px;"></div>
</div>

此外，我将使用“屏幕”混合模式，而不是“乘法”，因为它演示了颜色删除更清楚。

带颜色去除：

第一次

不去除颜色：

第一个
更多信息可在此处找到：
https://css-tricks.com/almanac/properties/m/mix-blend-mode/

赞(0）回复(0）举报 2022-12-01

我来回答

CSS灰度过滤器和背景混合模式？

3条答案

相关问题

热门标签

最新问答