用css给png图标换颜色

jiyutr

已于 2024-05-21 16:31:33 修改

阅读量1.3k

点赞数 1

文章标签： css 前端 javascript

于 2024-05-21 16:30:26 首次发布

本文链接：https://blog.csdn.net/jiyutr/article/details/139093912

版权

前言

在网页设计中，图标起着非常重要的作用。它们不仅可以提升页面的美观度，还能够提供直观的可视化信息。然而，有时候我们可能需要对图标进行一些修改，以使其更符合网页的整体风格。本文将介绍一种方法，可以帮助我们在纯色图标上应用不同的颜色，以满足网页设计的需求。

一、适用类型

首先，这种方法适用于纯色的图标，因为我们需要对图标的颜色进行修改。对于多色或复杂的图标，这种方法可能会失效。

图片可以通过两种方式引入到网页中，即使用background属性或使用img标签。无论是哪种方式，我们都可以使用css来改变图标的颜色。

二、代码示例

<!doctype html>
<html>
<body>
   <style>
	.img{
		width: 64px; 
		height: 64px;
	}
    .icon-box {
		display: inline-block;
		width: 64px; 
		height: 64px;
		overflow: hidden;
		position: relative;
    }
/*rgb(255,255,0) 是要替换的颜色  64px是与icon-box的width同步的*/
    .icon {
		width:100%;
		height:100%;
		position: absolute;
		left: -64px;
		border-right: 64px solid transparent;
		-webkit-filter: drop-shadow(rgb(255,255,0) 64px 0);
		filter: drop-shadow(rgb(255,255,0) 64px 0);
    }
    
    .icon-bg{
		background-image: url(https://img-blog.csdnimg.cn/direct/ff27966ad8d74e449d11c70ecb3309ee.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width:100%;
		height:100%;
		position: absolute;
		left: -64px;
		border-right: 64px solid transparent;
		-webkit-filter: drop-shadow(rgb(255,255,0) 64px 0);
		filter: drop-shadow(rgb(255,255,0) 64px 0);
    }
    </style>
     <img class='img' src='https://img-blog.csdnimg.cn/direct/ff27966ad8d74e449d11c70ecb3309ee.png' />
	<div class='icon-box'>
		<img class='icon' src='https://img-blog.csdnimg.cn/direct/ff27966ad8d74e449d11c70ecb3309ee.png' />
	</div>
	<br/>
	<img class='img' src='https://img-blog.csdnimg.cn/direct/25453b83632f4afab811a7de3467b0d7.png' />
	<div class='icon-box'>
		<img class='icon' src='https://img-blog.csdnimg.cn/direct/25453b83632f4afab811a7de3467b0d7.png' />
	</div>
	<br/>
	 <img class='img' src='https://img-blog.csdnimg.cn/direct/ff27966ad8d74e449d11c70ecb3309ee.png' />
	<div class='icon-box'>
		<div class='icon-bg'></div>
	</div>
</body>
</html>