微信小程序图片使用filter将彩色图片变成黑白以后，border-radius失效的解决办法

使用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

最后

以上就是标致外套为你收集整理的微信小程序图片使用filter将彩色图片变成黑白以后，border-radius失效的解决办法的全部内容，希望文章能够帮你解决微信小程序图片使用filter将彩色图片变成黑白以后，border-radius失效的解决办法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。