×

教你如何用CSS更改PNG图像的颜色

作者:andy0012019.09.21来源:Web前端之家浏览:518评论:0
关键词:html过滤器
微信公众号

微信公众号

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

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

Filter属性存在许多属性值:

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>转换为灰度图像</title>
		<style>
			img {
				filter: grayscale(10);
			}
		</style>
	</head>

	<body>
		<img src="https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg" 
		        width="500px" height="250px" alt="filter applied" />
	</body>
	</body>

</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>将图像转换为不同的颜色</title>
		<style>
			img {  
                float:left; 
            } 
            .image1 { 
                filter: invert(100%); 
            } 
            .image2 { 
                filter: sepia(100%);    
            }
		</style>
	</head>

	<body>
		
	    <img class = "image1" src="https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg"
        width="500px" height="250px" alt="filter applied" />
          
        <img class = "image2" src="https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg"
        width="500px" height="250px" alt="filter applied" /> 
	</body>
	</body>

</html>

大家可以预览看下默认状态和过滤后的2种效果,对比下。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/html9iit909.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • admin

    这个是以本地项目为GIT的例子,非线上,文章只是提供查找方法,仅供大家参考的。...

  • 访客

    艹你这个图别人能找到我信你个鬼还搞两托sb...

  • admin

    感谢反馈,这边Web前端文章很旧了,版面已修复....

  • 访客

    版面不美观,影响用户的体验...

  • 8j84

    LightningChart还是第一次听说,了解下。...

  • 动画制作

    很基础的技术知识点...

  • 今日新闻

    文章不错支持一下吧...

  • 头条

    文章不错非常喜欢...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2019 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero

时时彩平台哪个好