使用css的filter将彩色图片亮度降低之后,设置的border-radius会出现失效不起作用的情况
需求:用户在线头像为原始的彩色图片,离线将用户头像改为黑白色
原来的写法:
<image src="{{item.type=='add' ? 'http://h5.nn.w293.cn/ui/map/addMember.png' : item.iconPath}}" class="h40 w40 b-r100 bx {{item.online==0 ? ' unOnline' : ''}}" style="{{item.type!='add'&& currencyUserId==item.id ? 'border:2px solid #1CA2FC':''}};"></image>
发现class b-r100也就是border-radius:100px失效
改进方法:在image标签外面套一层view,在view上面降低暗度,这样圆角就有效果了
<view class="h40 w40 {{item.online==0 ? ' unOnline' : ''}}">
<image src="{{item.type=='add' ? 'http://h5.nn.w293.cn/ui/map/addMember.png' : item.iconPath}}" class="h40 w40 b-r100 bx" style="{{item.type!='add'&& currencyUserId==item.id ? 'border:2px solid #1CA2FC':''}};"></image>
</view>
css
.unOnline{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
/* -webkit-filter: brightness(0.30);
filter: brightness(0.30); */
}
或者:给image的父元素即view使用border-radius,image设置filter