MUI顶部底部毛玻璃效果

分类：MUI

MUI顶部导航栏和底部选项卡能不能做到像源生那样的毛玻璃效果？如何写

2015-02-05 08:40 负责人:无分享

2 个回复

DCloud_UNI_FXY

自己可以弄张毛玻璃效果的图片做顶部或底部背景，然后设置下顶部和底部的透明度，如果只是简单的模糊效果，也可以纯css实现

参考：
http://www.webdirections.org/demos/translucency/index.html
http://codepen.io/Matori/pen/JFzok

冰冻 (作者)

不好意思才看到，我的意思是这样的：

用tab bar webview布局，当webview滚动时候顶部和底部浮动在webview上面时呈现的毛玻璃效果，类似于ios淘宝客户端首页。

MUI在嵌入webview在距离顶部和底部都预留的空间，虽然css写了半透明效果也没有呈现出来

2015-02-08 13:29
DCloud_UNI_FXY

你可以把子webview的style里的top设置为0，然后，自己再控制子webview里内容和顶部的距离，这样应该可以实现滚动时的顶部的半透明效果了

2015-02-09 12:03

1***@qq.com

        position: fixed;  
    bottom: 0;  
    height: 50px;  
    width: 100%;  
    -webkit-backdrop-filter: blur(13px);  
    backdrop-filter: blur(13px);  
    background: rgba(255, 255, 255, 0);

subNViews 、titleView设置一个透明度就可以了。

1***@qq.com

你这个是app端的解决方案么？subNViews的配置好像只有backgroundColor吧

2018-02-24 11:43
1***@qq.com

回复 1***@qq.com:用css实现毛玻璃，然后subNviews 可以设置透明度，就

ok了

2018-02-26 14:41

该问题目前已经被锁定, 无法添加新回复

MUI顶部底部毛玻璃效果

2 个回复

公告

相关问题

MUI顶部底部毛玻璃效果

与内容相关的链接

2 个回复

公告

相关问题