html5遮罩,div遮罩层

如何通过 HTML5 实现 iOS 7 的实时毛玻璃模糊效果

所谓的毛玻璃效果其实是半透明+模糊，可以用CSS filter实现。

时间不多，就抛个砖，题主可以自己找一下文档和更多案例。

filter - CSS

div {

-moz-filter: blur(5px);

-webkit-filter: blur(5px);

-o-filter: blur(5px);

-ms-filter: blur(5px);

filter: blur(5px);

}

大体思路是，当出现弹出层的时候，对背景层增加blur filter，再给弹出层的一定透明度就可以了。

因为有同学坚持说 CSS filter 只能用于图片，所以录了一个小视频，证明它是可以用于可视的DOM元素的。

在 codepen 上找了一个栗子，是通过CSS filter + JS复制滚动元素实现的毛玻璃 Nav Bar 效果，也可以说明，这个属性真的不是只能作用于图片，也不需要“截屏”啊。

相关问答

Q1: html5如何实现弹出提示框，并且伴随遮罩层并且可以关闭弹出框

通过jquery的show()和hide()函数联合使用，实现弹出窗口。

一、show（）和hide（）函数解析：

1、show() 方法显示隐藏的被选元素。

注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

2、hide() 方法隐藏被选元素。

这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。

二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：

三、设计遮罩层的样式，如下：

四、弹出窗口的css样式，代码如下：

五、初始页面如下：

六、点击按钮，查看弹出窗口结果：

七、关闭弹出窗后，打开开发者中心，如下：

Q2: HTML5中的蒙版怎么实现

在很多网页中我们会看到在一个图片上面有一个半透明的色块，上面写有信息介绍，这个东西叫做蒙版，或者是遮罩。

那么这个蒙版是怎么实现的呢。。。

我们看下面这段代码：

!DOCTYPE html

html

head lang="en"

meta charset="UTF-8"

title蒙版||遮罩/title

style

.box1 {

width: 830px;

height: 470px;

border: 1px solid #000;

position: relative;

overflow: hidden;

}

.mengban{

width: 100%;

height: 200px;

background-color: rgba(255,0,0,.5);

position: absolute;

bottom: 0;

transition: all linear 1s;

}

.box1:hover .mengban{

bottom: -200px;

}

/style

/head

body

div class="box1"

img src="img/watchingU.jpg" alt="pic"/

div class="mmengbanXX东西 XX钱.../div

/div

/body

/html

上面的代码就是写蒙版的方式，这个只是下面的蒙版，如果要完成上下左右的蒙版都是一样的，只是定位的方向和蒙版的宽高需要自己取调整。

Q3: html5开发手机app 如何实现遮罩层的效果

写一个fixed定位的div，z-index稍微高一点，设置一下背景色和透明度就行