css3改变纯色png图片的颜色

如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误，请一定指出，以免误导大家、也误导我。本文介绍利用css3的属性：drop-shadow来制造阴影效果来达到改变元素背景色的效果。点击此处查看demo基本语法：filter：drop-shadow(5px 5px 10px black);filter: ...

帆酱

5755人浏览 · 2019-10-16 14:59:46

帆酱 · 2019-10-16 14:59:46 发布

如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。
希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误，请一定指出，以免误导大家、也误导我。

本文介绍利用css3的属性：drop-shadow来制造阴影效果来达到改变元素背景色的效果。

点击此处查看demo

基本语法：

filter：drop-shadow(5px 5px 10px black);
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

修改png图片的颜色代码

<style>
    body{
      background: #ccc;
    }
    .icon {
      display: inline-block;
      width: 30px; height: 30px;
      overflow: hidden;
    }
    .icon-del {
        background: url('../statics/images/nav-1.png') no-repeat center;
        background-size:100% 100%;
    }
    .icon > .icon {
        position: relative;
        left: -30px;
        border-right: 30px solid transparent;
        -webkit-filter: drop-shadow(30px 0 0 #ff6300);
        filter: drop-shadow(30px 0 0 #ff6300);
    }
    .ele_icon{
      position: relative;
      left: -30px;
      border-right: 30px solid transparent;
      -webkit-filter: drop-shadow(30px 0 0 #ccc);
      filter: drop-shadow(30px 0 0 green);
    }
  </style>
<body>
    <h3>css修改纯色png图标的颜色</h3>
    <p><strong>原始图标背景</strong></p>
    <i class="icon icon-del"></i>
    <p><strong>修改后图标背景</strong></p>
    <i class="icon"><i class="icon icon-del"></i></i>
    <p><strong>原始图片元素</strong></p>
    <img src="../statics/images/nav-1.png" class="icon">
    <p><strong>修改后图片元素</strong></p>
    <img src="../statics/images/nav-1.png" class="icon ele_icon">
</body>

效果图：