css3 實現png圖片改變背景顏色

實際上是用的是就是css的filter的drop-shadow屬性

drop-shadow:

1 不支持內陰影

2 不支持多陰影

3 兼容性 ie13+  谷歌 火狐   android4.4+  ios

4 實現的是正真意義上的投影。對於非透明的部分都會有投影，表現形式與box-shdow不一樣，透明的部分不會有陰影，包括png格式的圖片的透明部分

demo1修改png圖片的顏色：

html

<div class="demo1">
    <div class="del"></div>
</div>

css

.demo1 { width: 16px; height: 16px; overflow: hidden; margin: 50px auto;
        } .demo1 .del{ width: 16px; height: 16px; position: relative; background: url("images/delete.png") no-repeat center;
        } .demo1 .del:hover{ left:-16px; border-right:16px solid transparent; -webkit-filter:drop-shadow(16px 0 0px red); filter:drop-shadow( 16px 0 0px red);
        }

 filter：drop-shado(x偏移 y偏移  r模糊半徑  color投影的顏色);

1 “改變顏色”時設置left：-16px:使原來的背景顏色，向左移動16px（背景圖片的寬度是16px，元素的寬度也是16px）;

2 父元素overflow:hidden;就隱藏了，這是del被完全隱藏，

3 為了顯示投影（根據投影在透明部分沒有投影）設置border-right：16px solid transparent;(增加del的表現寬度),下面就只剩下改變圖片的顏色了，根據drop-shadow

4 設置投影filter:drop-shadow( 0px 0 0px red); 這時候的投影在del背景圖片的下方，因為背景圖左移動16px,所以看不到，這是設置x軸偏移16px，剛好的2 中設置的border-right上，這樣就實現css改變png圖片的顏色了

demo2:實現帶有三角的box的投影

三角的實現方法：為了兼容都是用border寫的，使用box-shadow（盒陰影）如果實現三角也帶陰影，就需要在父元素和三角上都設置box-shadow就會出現陰影重疊，效果不是很好
這里就可以使用drop-shadow實現
html

<div class="demo">
    <div class="angle"></div>
</div>

css

.demo {
            width: 300px;
            height: 100px;
            background-color: #fff;
            margin: 100px auto;
            /*-webkit-box-shadow:  0px 0px 10px #000;
            -moz-box-shadow: 0px 0px 10px #000;
            box-shadow: 0px 0px 10px #000;*/
            filter: drop-shadow(5px 5px 10px #000);
        }

        .angle {
            position: absolute;
            margin-left: -20px;
            margin-top: 30px;
            width: 0;
            height: 0;
            border-right: 20px solid #fff;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;

        }

效果圖：