您的位置：首页 > 移动开发 > 微信开发

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

2017-11-28 18:13 961 查看

本文出自：

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 小程序图片 svg 变色

相关文章推荐

新的分享

章节导航