使用CSS快速更改PNG图像的颜色(两种方法)
本文将给大家介绍如何使用CSS快速更改PNG图像的颜色,这也是日常开发中比较常见一个效果实现方法。
首先大家可以先下载本文中展示的png图片素材,下载地址:https://www.php.cn/xiazai/sucai/1733
下面我将给大家介绍两种实现方法:
第一种方法
本示例使用灰度滤镜将彩色图像更改为灰度图像。
代码如下:
灰度图像
效果如下图:
第二种方法
此示例对图像使用了很多filter~
代码如下:
那么这里需要大家了解一个重要的属性filter :
filter属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。
Filter属性主要用于设置图像的视觉效果,Filter 功能存在许多属性值,语法如下:
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜
滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。
注:旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。
以上就是使用CSS快速更改PNG图像的颜色(两种方法)的详细内容,更多请关注毛票票其它相关文章!
热门推荐
10 儿子立冬祝福语简短独特
11 对当兵的祝福语简短
12 侄儿高考试祝福语简短
13 伴郎红包祝福语朋友简短
14 媳妇生日简短祝福语朋友
15 公司年会祝福语简短最好
16 元旦感恩祝福语简短大全
17 红包祝福语简短10字
18 周六早晨祝福语简短