将灰度滤镜应用于div [英] Apply grayscale filter to div

问题描述

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

Trying to apply a grayscale filter to the div that is over top of the main background. Wondering if this is possible at all with jQuery, CSS3, or HTML5. I was playing with a few of the new CSS3/HTML5 technologies but to no success.

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

I can't save it as two images because the background needs to stretch full-size, so it won't be exactly the same on every screen.

我正在制定早期草案，我只是想知道我是否应该杀掉这个想法。如果你指出我正确的方向，我可以弄清楚。

I'm working on an early draft and I am just wondering if I should kill this idea. If you point me in the right direction I can figure it out.

推荐答案

你无法应用灰度一切在我身后在CSS中过滤。

You can't apply a "grayscale everything behind me" filter in CSS.

如果你不介意长宽比丢失全屏（根据你的云图可能无关紧要），这是一种技巧。它将div放在背景之上，宽度的一半，并使用 background-size：200％100％，以便它的大小与背景相同。然后我们应用CSS3灰度及其旧版本。然后在顶部使用伪元素使图像变暗。

If you don't mind full screen with loss of aspect ratio (which may not matter depending on your cloud image) here is a technique. It places a div on top of the background that is half the width and uses background-size:200% 100% so that it will size the same as the background. Then we apply CSS3 grayscale and the older versions of it. Then a pseudo-element on top to darken the image.

测试并使用：Chrome 25，Firefox，IE9（我假设7,8也是）。

Tested and works in: Chrome 25, Firefox, IE9 (I assume 7, 8 as well) currently.

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

这篇关于将灰度滤镜应用于div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！