How to completely gray out an image with css?


Tags: css,image

Problem :

I have this image: enter image description here.

I need to gray it out to look like this: enter image description here.

Using the response in this SO question: Gray out image with CSS?

 opacity : 0.4;
 filter: alpha(opacity=40); /* msie */

I get this: enter image description here

Setting the filter property to filter: grayscale(100%) still leaves changes in the colors: enter image description here

Anyway I can make it completely gray?



Solution :

It sounds like you are trying to change the actual pixels in an image. I believe what you are looking for is something like.

Pixastic (coloradjust)

https://github.com/jseidelin/pixastic

http://www.pixastic.com/lib/docs/actions/coloradjust/

or PaintbrushJS (colour tint)

https://github.com/mezzoblue/PaintbrushJS

http://mezzoblue.github.com/PaintbrushJS/demo/


    CSS Howto..

    GWT: How to catch what code overrides the CSS cursor value. Or why it overrides?

    Jquery content slider, how to duplicate without redundant code

    How do I design a css gradient to look like the attached Facebook Login screen

    How do I fit a fieldset to the size of its content with CSS?

    How to combine transforms in CSS?

    How can I mark it up? [closed]

    How to include css files into compojure project?

    How to change font color of select2 control using css

    How to design a cross client / browser compatible email?

    How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?

    How to find a div / panel in repeater and apply css?

    How can I map 5 distinct zone on a draggable-vertical element?

    How to style checkbox using CSS?

    CSS: How to clear line-through for an element in a table row?

    How can a URL fragment affect a CSS layout?

    How to select element, enclose it in a div and add a class to it, in pure javascript?

    Jquery Toggle Button image and Div Show/Hide

    How can I override an inline style with an external css?

    How to align an image inside a DIV without adding new classes using CSS

    How to add multiple css rules at once through Dev-Tools or Firebug

    How to serve different css files to different ajax pages?

    How to import CSS from node_modules in webpack angular2 app

    How do I convert a text to css hex value?

    How to add CSS stylesheet to aspx.vb table

    How to center modal window in css+html?

    How can I figure out how much a div shifts when a translate:scale is applied?

    Couldn't understand CSS selectors meaning in the juizy slideshow stylesheet code

    960 CSS Framework, how to get full 960 width?

    How to remove jquery mobile button color or override button css?

    How do I use CSS to centre this content?