css改变透明背景png图片的图标颜色

 

HTML:

1 <p><strong>原始图标</strong></p>
2 <i class="icon icon-del"></i>
3 
4 <p><strong>可以变色的图标</strong></p>
5 <i class="icon"><i class="icon icon-del"></i></i>

 

CSS:

 1 body {
 2     padding: 100px;
 3 }
 4 
 5 .icon {
 6     display: inline-block;
 7     width: 32px;
 8     height: 32px;
 9     overflow: hidden;
10     /*background: lightcoral;*/
11 }
12 
13 .icon-del {
14     background: url("delete.png") no-repeat center;
15 }
16 
17 .icon > .icon {
18     position: relative;
19     left: -32px;
20     border-right: 32px solid transparent;/*必不可少*/
21     -webkit-filter: drop-shadow(32px 0 0 red);
22     filter: drop-shadow(32px 0 0 red);
23 }

 

效果：

 

 

 

 

学习来自[张鑫旭的空间]

 

posted on 2016-06-11 15:04  Asina  阅读(5565)  评论(0)  编辑  收藏  举报