CODEWITHSUNDEEP
jqueryhtmlcss
deflime
deflime

Reputation: 613

Apply grayscale filter to div

quick example

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.

Upvotes: 7

Views: 31435

Answers (7)

Epic Speedy
Epic Speedy

Reputation: 723

2022: You can now grayscale everything with vast support for browsers (except IE). You do not have to use the webkit prefix either:

filter: grayscale(1);

Upvotes: 0

adamgede
adamgede

Reputation: 2142

backdrop-filter

However, it has mixed support at the time of writing - Chrome, Edge, Safari, Opera, but surprisingly not Firefox. Give it some time for major browsers, I guess. I wouldn't expect IE to ever support it, though.

Here is an example where the first row of blocks are in color, and then the second row of blocks are also in color, but are covered by an overlay that uses backdrop-filter on it.

.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>

Upvotes: 0

Pierre Gerbaud
Pierre Gerbaud

Reputation: 131

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

Upvotes: 4

coulbourne
coulbourne

Reputation: 529

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.

Upvotes: -1

Daniel Imms
Daniel Imms

Reputation: 50189

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

enter image description here

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

Upvotes: 6

manutenfruits
manutenfruits

Reputation: 1577

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

Upvotes: 16

lukeocom
lukeocom

Reputation: 3243

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...

Upvotes: 2

Related Questions