Apply Grayscale Filter To Div

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 o

Solution 1:

You can use CSS filters:

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

Keep in mind that this works on Chrome and Safari at the moment.

More info: http://caniuse.com/#feat=css-filters

Solution 2:

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

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.

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

Solution 3:

You can do this by applying a mix-blend-mode to the div on the top, with a white background :

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

Be careful to the z-index.

For more on mix-blend-mode :

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

Solution 4:

CSS makes it simple to provide 'grey-scale' or transparent backgrounds using rgba values. Alternatively you can use transparent images.

An example is here http://jsfiddle.net/TtSUD/

in your css you apply an rgba value to a background as such:

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

The first three values are for the amount of red green and blue, the fourth value is the percentage of opaqueness. 1 = 100% opaque, 0.5 = 50% opaque/transparent.

Hope this helps...

Solution 5:

You could make the background image a greyscale version of the image behind it. That should work. You just have to position the backgrounds right.