html5磨砂透明首页制作,如何制作磨砂效果的顶部固定导航菜单

使用过iOS 7的朋友会看到上面有一种非常酷的顶部固定导航菜单效果-磨砂效果。顶部导航菜单是半透明的模糊效果，当往下滚动页面的时候，顶部导航菜单遮住页面的内容，因为它是半透明的，它下面的内容淡淡的显示，形成一种非常酷的磨砂效果。

我们使用CSS的blur滤镜完全可以在页面中实现这个效果。但是使用CSS滤镜只能在元素本身内容上产生效果，它不能影响到它下方的元素。也就是说，CSS的blur滤镜不能对使用该滤镜的元素下面的元素产生模糊效果。有一个新的属性-webkit-backdrop-filter可以实现这个功能，但这是一个实验性的属性，只在webkit内核的浏览器中可以运行。

其实，还有另外的方法可以实现这种效果，这就是我们这批文章要介绍的内容。

制作一个模糊导航条

在这个demo中，这个模糊导航条是一个空的元素，它的位置设置为固定定位。真正的导航菜单位于它的上方，使用和模糊导航条相同的大小和坐标。下面的代码使用Sass来书写，没有添加浏览器厂商的前缀。

#blurrycontent {

padding: 1rem;

top: 0; left: 0;

width: 100%;

height: 5rem;

overflow: hidden;

position: fixed;

filter: blur(4px);

}

nav {

@extend #blurrycontent;

filter: none;

text-align: right;

}

在页面中的主要元素是一个元素。

London