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

最新推荐文章于 2024-08-26 08:00:00 发布

wyk304443164

最新推荐文章于 2024-08-26 08:00:00 发布

阅读量2.3k

点赞数 1

分类专栏：前端文章标签： css 小程序图片 svg 变色

本文链接：https://blog.csdn.net/wyk304443164/article/details/78657811

版权

前端专栏收录该内容

44 篇文章 2 订阅

订阅专栏

本文出自：

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";
    }
  }