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