接到了个小活,其中就有一个需求是利用 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;
}

演示样式

CSS 使用图片变灰的方法(css3 greyscale 样式) 技术教程

文章来源:飞鸟慕鱼博客

随机文章推荐

阿里云账号怎么注册?

怎么查备案号,网站域名备案查询教程

域名实名认证需要什么(域名实名认证怎么认证)

怎么买服务器,云服务器购买教程

linux 中"> 与 >>"的作用与用法

本文链接:https://www.heqi.cn/75281.html

和气网温馨提示,转载请注明文章出处

本站部分内容为原创著作,其它基于互联网公开分享整理,版权归原作者所有,如侵犯到您的权益,请联系本站删除!