改变图片颜色

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

filter:drop-shadow(水平阴影偏移距离 垂直阴影偏移距离 投射的阴影颜色 );
1
首先准备一张背景色透明的图片如下:

用一个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>

相关推荐

  1. 改变图片颜色

    2024-01-24 17:28:01       37 阅读
  2. 点击菜单改变svg图标颜色

    2024-01-24 17:28:01       11 阅读
  3. Android Canvas 改变背景颜色

    2024-01-24 17:28:01       39 阅读
  4. python改变图片大小

    2024-01-24 17:28:01       11 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-24 17:28:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-24 17:28:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-24 17:28:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-24 17:28:01       20 阅读

热门阅读

  1. 牛客周赛26

    2024-01-24 17:28:01       36 阅读
  2. orchestrator介绍3.4 web API 的使用

    2024-01-24 17:28:01       37 阅读
  3. 7.docker进阶

    2024-01-24 17:28:01       27 阅读
  4. 【力扣 206】反转链表 C++题解(链表+头插法)

    2024-01-24 17:28:01       33 阅读
  5. MCS-51指令中符号的意义

    2024-01-24 17:28:01       33 阅读