前言
在网页设计中，图标起着非常重要的作用。它们不仅可以提升页面的美观度，还能够提供直观的可视化信息。然而，有时候我们可能需要对图标进行一些修改，以使其更符合网页的整体风格。本文将介绍一种方法，可以帮助我们在纯色图标上应用不同的颜色，以满足网页设计的需求。
一 、适用类型
首先，这种方法适用于纯色的图标，因为我们需要对图标的颜色进行修改。对于多色或复杂的图标，这种方法可能会失效。
图片可以通过两种方式引入到网页中，即使用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>三、展示效果
左边是原图 右边是处理过的图片
