收藏
回答

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
回答关注问题邀请回答
收藏

2 个回答

  • 小程序商城定制开发2600元全包
    小程序商城定制开发2600元全包
    06-03

    方向是利用一些插件实现类似的效果,抛弃使用filter属性(如果你坚持要在手机上实现该效果的话) 小白因为滤镜效果可有可无,所以直接将滤镜效果删除,让overflow:hidden生效。附笔者本身要实现的效果:圆形图片加模糊效果。

    06-03
    有用 1
    回复
  • 卢霄霄
    卢霄霄
    2018-12-29

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

    2018-12-29
    有用
    回复 13
    • 🙄国民王九蛋🤒
      🙄国民王九蛋🤒
      2019-01-02

      chrome里显示是没问题的

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

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

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

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

      2019-01-02
      回复
    • 卢霄霄
      卢霄霄
      2019-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没失效啊


      2019-01-02
      回复
    • 🙄国民王九蛋🤒
      🙄国民王九蛋🤒
      2019-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显示隐藏没有做成属性,却做成了容器····不方便)

      2019-01-02
      回复
    查看更多(8)
登录 后发表内容