将灰度滤镜应用于div

Question

尝试将灰度滤镜应用于主背景顶部的div.想知道这是否可以使用jQuery,CSS3或HTML5.我正在玩一些新的CSS3/HTML5技术,但没有成功.

我无法将其保存为两个图像,因为背景需要拉伸全尺寸,因此在每个屏幕上都不会完全相同.

我正在做一个早期的选秀,我只是想知道我是否应该杀掉这个想法.如果你指出我正确的方向,我可以弄明白.

Answer 1

您可以使用CSS过滤器:

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

请注意,此功能目前适用于Chrome和Safari.

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

Answer 2

你不能在 CSS 中应用“我身后的灰度”过滤器。

如果您不介意失去纵横比的全屏（这可能无关紧要，具体取决于您的云图像），这是一种技巧。它在背景的顶部放置一个宽度为一半的 div 并使用，background-size:200% 100%以便它的大小与背景相同。然后我们应用 CSS3 灰度和它的旧版本。然后在顶部添加一个伪元素来使图像变暗。

目前已测试并适用于：Chrome 25、Firefox、IE9（我也假设为 7、8）。

js小提琴

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