纯css svg 改变图片颜色 ios android 小程序

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wyk304443164/article/details/78657811

本文出自：

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，在显示阴影的时候，超过自身大小就不能显示了，我的做法是，将图片的宽度放大到三倍，向右偏移阴影，再向左偏移整体。

亲如果能看到这一篇，那么说明你也能看得懂上面的代码， 这边不赘述