本文出自：

http://blog.csdn.net/wyk304443164

使用的是 filter drop-shadow
如果你只想相容 Chrome 那麼請看：

http://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/

如果你想相容ios Android 小程式，那麼

.tian-word {
    .wh(~"200rpx", ~"200rpx");
    .bis("https://media.alearning.com.cn/ae09122b5a540471271e25061c7ab61a.jpg"
 
);
    margin: ~"4rpx";
    display: inline-block;
    position: relative;
    overflow: hidden;

    span {
      font-family: 'pinyin';
      font-size: ~"150rpx";
      .center;
    }

    image {
      .wh(~"150rpx", ~"150rpx");
      .center;
    }

    .need-color {
      /*left: ~"-100rpx";*/
      /*border-right: 0 solid transparent;*/
 

      /*-webkit-filter: drop-shadow(rgb(0, 204, 153) ~"200rpx" 0px);*/
      /*filter: drop-shadow(rgb(0, 204, 153) ~"200rpx" 0px);*/

      /*background: rgba(0, 0, 0, 10%);*/
      .wh(~"450rpx", ~"150rpx");
      display: block;
      /*left: ~"-100rpx";*/
      border-right: 0 solid transparent;
      -webkit-filter: drop-shadow
 
(rgb(0, 204, 153) ~"150rpx" 0px);
      filter: drop-shadow(rgb(0, 204, 153) ~"150rpx" 0px);

      margin-left: ~"-150rpx";
    }
  }

ios，在顯示陰影的時候，超過自身大小就不能顯示了，我的做法是，將圖片的寬度放大到三倍，向右偏移陰影，再向左偏移整體。

親如果能看到這一篇，那麼說明你也能看得懂上面的程式碼， 這邊不贅述