码迷,mamicode.com
首页 > Web开发 > 详细

PNG 格式小图标的 CSS 任意颜色赋色技术

时间:2018-08-09 17:31:00      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:width   通过   col   inline   添加   投影   一个   spl   图标   

<style>
.icon-color{
    display: inline-block;
    width: 144px;
    height: 144px;
    
    overflow: hidden;
}
.icon-color:after{
    content: ‘‘;
    display: block;
    height: 100%;
    transform: translateX(-100%);
    background: url(‘https://user-gold-cdn.xitu.io/2018/7/31/164f0e6745afe2ba?w=144&h=144&f=png&s=2780‘) no-repeat center / cover;
    filter: drop-shadow(144px 0 0 #42b983);
}
</style>

<i class="icon-color"></i>

 

使用 CSS3 滤镜 filter 中的 drop-shadow

  1. drop-shadow 滤镜可以给元素或图片非透明区域添加投影
  2. 将背景透明的 PNG 图标施加一个不带模糊的投影,就等同于生成了另外一个颜色的图标
  3. 再通过 overflow:hidden 和位移处理将原图标隐藏

PNG 格式小图标的 CSS 任意颜色赋色技术

标签:width   通过   col   inline   添加   投影   一个   spl   图标   

原文地址:https://www.cnblogs.com/jackjo/p/9449403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!