接到了个小活,其中就有一个需求是利用 CSS 样式代码将图片变灰,这个需求很只需要使用 CSS filter 属性中的 greyscale 值即可,下面具体的来说一下。
css3 greyscale 样式
css3 中 greyscale 是 filter 中的一种属性,可以对HTML元素进行灰色滤镜,它的用法也非常的简单,并可以适用于a,div,img,svg 等HTML元素!
CSS 图片变灰的方法
HTML代码:
<img src="s.png" class="gray_img" />
CSS代码:
.gray_img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }
演示样式