收藏
回答

filter导致overflow:hidden失效

案例代码如下:

<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属性失效,下边是效果对比图:



最后一次编辑于  2018-12-29  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 卢霄霄
    卢霄霄
    2018-12-29

    这个锅。。怎么说呢。。我记得是 chromium 的bug。。。别用在一层。。

    2018-12-29
    赞同
    回复 13
    • 🙄国民王九蛋🤒
      🙄国民王九蛋🤒
      01-02

      chrome里显示是没问题的

      01-02
      回复
    • 卢霄霄
      卢霄霄
      01-02回复🙄国民王九蛋🤒

      border-radius失效,不是overflow失效吧

      01-02
      回复
    • 🙄国民王九蛋🤒
      🙄国民王九蛋🤒
      01-02回复卢霄霄

      是父层的overflow失效,border-radius是被遮挡了,调下图片大小就看到了

      01-02
      回复
    • 卢霄霄
      卢霄霄
      01-02回复🙄国民王九蛋🤒

      <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没失效啊


      01-02
      回复
    • 🙄国民王九蛋🤒
      🙄国民王九蛋🤒
      01-02回复卢霄霄

      就是超出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显示隐藏没有做成属性,却做成了容器····不方便)

      01-02
      回复
    查看更多(8)