December 22, 2014

How to add grayscale to an image using css?

Add grayscale to an image using css

CSS Filters are a powerful tool that you can use to achieve varying visual effects (sort of Photoshop filters). Filters are commonly used to adjust the rendering of an image, a background, or a border.

grayscale()

Converts the input image to grayscale. The value of “amount” defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

HTML

<img src="https://sites.google.com/site/vivinantony/img/posts/How-to-add-grayscal-to-a-image-using-css.jpg" />

CSS

img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
demo

No comments:

Post a Comment

Popular Posts

Views