使用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 祝妹妹毕业祝福语简短
18 新年祝福语长篇文案简短