css修改图片颜色

最新推荐文章于 2024-09-16 22:10:57 发布

嘘，此处属於婷

最新推荐文章于 2024-09-16 22:10:57 发布

阅读量662

点赞数 1

分类专栏：个人学习总结文章标签： css

本文链接：https://blog.csdn.net/AiTingYan/article/details/118937259

版权

个人学习总结专栏收录该内容

25 篇文章 1 订阅

订阅专栏

原理就是用到css3 滤镜filter中的drop-shadow，该滤镜可以给图片非透明区域添加投影
语法：

filter:drop-shadow(水平阴影偏移距离 垂直阴影偏移距离 投射的阴影颜色 );

首先准备一张背景色透明的图片如下:
在这里插入图片描述
用一个div将该图片包裹住，给图片添加：

filter: drop-shadow(15px 0px #fff)

这段代码，代表投射出一个和该图片一样的形状，

三个参数分别代表：

水平向右移动15px，
垂直方向不变，
投射出的形状颜色为白色。

接下来我们将原图设置在div外部并隐藏，变色后的投影放置在div中

完整代码为：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        	.search_wrap{
        		width:45px;
        		height:40px;
        		background: #F45350;
				display: flex;
				justify-content: center;
				align-items: center;
        	}
            .box{
                width: 15px;
                margin: 0 auto;
                text-indent: -15px;
                overflow: hidden;
            }
            .pic{
				width: 15px;
				height: 15px;
                filter: drop-shadow(15px 0px #fff);
            }
        </style>
    </head>
    <body>
     	<div class="search_wrap">
	        <div class="box">
	            <img src="./img/search.png" class="pic"/>
	        </div>
	   </div>
    </body>
</html>

最终实现效果如下：
在这里插入图片描述
如果想换成其他颜色，直接更改第三个参数就Ok了~