案例代码如下:
< view style = "width:200px;height:200px;background:yellow;border:1px solid red;border-radius:100px;overflow:hidden" > < image src = "//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style = "width:200px;height:200px;" /> </ view > < view style = "width:200px;height:200px;background:yellow;border:1px solid red;border-radius:100px;overflow:hidden;filter:brightness(0.88)" > < image src = "//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style = "width:200px;height:200px;" /> </ view > |
下边的view只是比上边的多了个filter属性,导致下边view的overflow属性失效,下边是效果对比图:
这个锅。。怎么说呢。。我记得是 chromium 的bug。。。别用在一层。。
chrome里显示是没问题的
border-radius失效,不是overflow失效吧
是父层的overflow失效,border-radius是被遮挡了,调下图片大小就看到了
<view style="width:100px;height:100px;background:yellow;border:1px solid red;overflow:hidden">
<image src="//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style="width:200px;height:200px;"/>
</view>
<view style="width:100px;height:100px;background:yellow;border:1px solid red;overflow:hidden;filter:brightness(0.88)">
<image src="//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style="width:200px;height:200px;"/>
</view>
你试试呢,overflow没失效啊
就是超出border-raidus部分没有隐藏起来,这个一看你就明白了~
<view style="width:200px;height:200px;background:yellow;border:1px solid red;border-radius:100px;overflow:hidden">
<image src="//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style="width:200px;height:200px;"/>
</view>
<view style="width:200px;height:200px;background:yellow;border:1px solid red;border-radius:100px;overflow:hidden;filter:brightness(0.88)">
<image src="//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style="width:100px;height:100px;"/>
</view>
(另外吐槽下 : 小程序的picker显示隐藏没有做成属性,却做成了容器····不方便)