将灰度滤镜应用于 div

Question

尝试将灰度滤镜应用于主背景上方的 div。想知道使用 jQuery、CSS3 或 HTML5 是否完全可行。我正在尝试一些新的 CSS3/HTML5 技术，但没有成功。

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

我正在做一个早期的草稿，我只是想知道我是否应该扼杀这个想法。如果您指出正确的方向，我可以弄清楚。

原文由 deflime 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你不能在 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 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 CSS 过滤器：

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

请记住，这目前适用于 Chrome 和 Safari。

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

原文由 manutenfruits 发布，翻译遵循 CC BY-SA 3.0 许可协议