使用CSS更改PNG图像的颜色

给定一个图像,如何使用CSS更改PNG图像的颜色?下面本篇文章就来给大家使用CSS更改PNG图像颜色的方法,希望对大家有所帮助。

使用CSS更改PNG图像的颜色_第1张图片

在CSS中使用Filter属性,利用滤镜功能来更改png图像颜色;CSS的Filter属性主要用于设置图像的视觉效果。

Filter属性存在许多属性值:

filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();

示例1:使用灰度滤镜将彩色图像更改为灰度图像



	
		
		转换为灰度图像
		
	

	
		filter applied
	
	

输出:

原始图像:

使用CSS更改PNG图像的颜色_第2张图片

应用过滤器后:

使用CSS更改PNG图像的颜色_第3张图片

示例2:此示例对图像使用许多过滤器。



	
		
		将图像转换为不同的颜色
		
	

	
	 filter applied
          
     filter applied 
	
	

效果图:

使用CSS更改PNG图像的颜色_第4张图片

更多web前端知识,请查阅 HTML中文网 !!

你可能感兴趣的:(CSS)