将灰度滤镜应用于div。

Question

尝试向覆盖在主背景上的 div 应用灰度滤镜。不确定是否可以使用 jQuery、CSS3 或 HTML5 实现这一点。我尝试了一些新的 CSS3/HTML5 技术，但没有成功。

我无法将它保存为两个图像，因为背景需要拉伸至全尺寸，所以它在每个屏幕上都不完全相同。

我正在制作一个早期草稿，想知道是否应该放弃这个想法。如果您指点我方向，我可以自己解决问题。

- deflime

---

我突然想到了一个解决方案，它相当简单但不太理想。保存两张图片，一张为彩色，一张为黑白色，并通过编写一些有创意的数学代码来 background-position 将黑白图像定位到正确位置。 - deflime

如果你的背景需要拉伸，你需要更多的云，而不是被拉伸的云... - Alnitak

图形非常大，屏幕截图只显示了一个小部分。 - deflime

针对“带有过渡效果的canvas+jquery”解决方案，请参考以下链接：http://stackoverflow.com/questions/7704415/how-to-apply-the-grayscale-jquery-plugin-to-a-background-image/24949717#24949717 - lepe

Answer 1

您可以使用CSS滤镜：

#mydiv{
    -webkit-filter: grayscale(1);
}

请注意，目前此方法仅适用于Chrome和Safari浏览器。

更多信息：http://caniuse.com/#feat=css-filters

- manutenfruits

---

更新2021年：适用于除IE外的所有主要浏览器。 - drac_o

你好，来自2023年的问候。 - olfek

Answer 2

你不能在CSS中应用“将我后面的一切变成灰度”滤镜。如果您不介意全屏且宽高比失调（根据您的云图像可能并不重要），这里有一个技巧。它在背景上放置了一个宽度为一半的div，并使用 background-size:200% 100%，以使其与背景大小相同。然后我们应用CSS3灰度和早期版本。最后再在图片上覆盖一个伪元素以加深图像的颜色。测试并可在Chrome 25、Firefox、IE9（我假设7、8也可）下使用。 jsFiddle

.gray {
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg);
    width:50%;
    height:100%;
    background-size:200% 100%;
    position:relative;

    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
}
.gray:after {
    display:block;
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000;
    opacity:.7;
}
body {
    margin:0;
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg);
    height:100%;
    background-size:100% 100%;
}
html {
    height:100%;
}

- Daniel Imms

---

我明白你的意思，这是一个比我想出来的更优化的解决方案，因为图形非常大。 - deflime

需要一些工作来正确支持，但这个想法对我来说似乎相当坚实。 - Daniel Imms

Answer 3

你可以通过将混合模式应用于顶部的div，并使用白色背景来实现此目的：

.divOnTop {
     background: white;
     mix-blend-mode: saturation;
}

注意 z-index 属性的设置。

了解更多混合模式的相关内容：

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

- Pierre Gerbaud

Answer 4

CSS使使用rgba值提供“灰度”或透明背景变得简单。另一种选择是使用透明图像。

以下是示例： http://jsfiddle.net/TtSUD/ 在您的CSS中，可以将rgba值应用于背景，如下所示：

#background_div{background-color:rgba(150,150,150,0.5);}

前三个值是红、绿、蓝的数量，第四个值是不透明度的百分比。1 = 100%不透明，0.5 = 50%不透明/透明。

希望这能帮到你...

- lukeocom

Answer 5

2022年：现在您可以使用广泛支持的浏览器（除IE外）将所有内容变为灰度。

您也不必使用webkit前缀：

filter: grayscale(1);

- Epic Speedy

Answer 6

背景过滤器

然而，在撰写本文时，它的支持情况各不相同 - Chrome、Edge、Safari、Opera都支持，但令人惊讶的是Firefox不支持。也许需要一些时间等待主流浏览器的支持。但我不认为IE会支持它。

这里有一个例子，第一行块是彩色的，然后第二行块也是彩色的，但被使用背景过滤器的覆盖层覆盖了。

.content, .overlay {
  position: absolute;
  width: 100%;
  height: 50%;
}

.content.second-content, .overlay {
  top: 50%;
}

.overlay {
  backdrop-filter: grayscale(1);
}

.content .color {
  display: inline-block;
  position: relative;
  height: 100%;
  width: 30%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<div class="content">
  <div class="color red"></div>
  <div class="color blue"></div>
  <div class="color yellow"></div>
</div>
<div class="content second-content">
  <div class="color red"></div>
  <div class="color blue"></div>
  <div class="color yellow"></div>
</div>
<div class="overlay">
</div>

- adamgede

Answer 7

您可以将背景图片设置为其背后图像的灰度版本。这应该是可以解决的。您只需要正确地定位背景即可。

- coulbourne