CSS灰度滤镜和background-blend-mode可以同时使用吗? [英] CSS grayscale filter and background-blend-mode at same time?

问题描述

我正在尝试以与photoshop文件相同的方式处理图像-将图像脱饱和为灰度，然后使用倍增混合模式应用颜色叠加层.为此，我正在使用...来样式化CSS背景图像.

I'm trying to treat an image the same way it is in a photoshop file - desaturating the image to grayscale, and then applying a color overlay with a multiply blend mode. To this end, I am styling a CSS background image with...

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

与此有关的问题是，对于混合模式，灰度滤镜最终会导致红色饱和度降低.换句话说，乘法首先发生，然后是灰度.如何切换它以便先应用灰度，然后再应用混合模式?

The problem with this is that the grayscale filter ends up desaturating red color for the blend mode. In other words, the multiply is occurring first and then the grayscale. How do I switch it so that the grayscale is applied first and then the blend mode is applied second?

我创建了一个小提琴( http://jsfiddle.net/g54LcoL1/1/ )的代码和屏幕快照(在Photoshop中制作)，以显示小提琴效果.最底部的图像div.grayscale.multiply应该被涂成红色.

I have created a fiddle (http://jsfiddle.net/g54LcoL1/1/) for the code and a screenshot (made in Photoshop) of what I would expect the the fiddle result to look like. The bottom most image, div.grayscale.multiply, should be colored red.

推荐答案

您不能使用过滤器来做到这一点，但是可以使用混合模式来完成所有事情

You can not do it with filter, but you can do it staying with blend mode for everything

混合中的等效灰度是亮度，以图像为源，纯白色为背景

the grayscale equivalent in blend is luminosity, with the image as source and a solid white as backdrop

因此，背景图像从下到上分别是:

So the background images, from bottom to top, are:

1. 白色(作为背景颜色)
2. 您的图片
3. 纯红色(现在必须指定为渐变)

和混合模式是光度和倍增

and the blend modes are luminosity and multiply

.test {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(0deg, red, red), url("http://cuteoverload.files.wordpress.com/kitteh_puddle-1312.jpg");
  background-color: white;
  background-blend-mode: multiply, luminosity;
  background-size: cover;
}

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

这篇关于CSS灰度滤镜和background-blend-mode可以同时使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！