如何将网页CSS背景图高斯模糊且全屏显示

html-css017

如何将网页CSS背景图高斯模糊且全屏显示,第1张

高斯模糊是PS、FW图片处理工具搞的。

全屏显示的方法1：使用CSS

.bg {background-image:url(scale.jpg)

-moz-background-size: 100% 100%/* Firefox 3.6 */

-o-background-size: 100% 100%/* Opera 9.5 */

-webkit-background-size: 100% 100%/* Safari 3.0 */

background-size: 100% 100%/* Firefox 4.0 and other CSS3-compliant browsers */

-moz-border-image: url(scale.jpg) 0/* Firefox 3.5 */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale')/* for <ie9 */}2：使用 IMG 标签

<img class=stock style=position: absolutetop: 0pxleft: 0pxheight: 100%width: 100%src=default.jpg补充方法3：使用 CSS3 的背景 Cover

.bg {background: #000 url(scale.jpg) no-repeat center center

-webkit-background-size: cover

-moz-background-size: cover

<div class="page show-modal">

    <div class="container">主要内容</div>

    <div class="modal">浮层</div>

</div>

假设有这样的HTML结构，那么让 .modal 绝对定位在 .container 上面，.container 设置 blur 即可。

.modal {

    display: none

    position: fixed

    left: 0

    top: 0

    right: 0

    bottom: 0

    background: rgba(255,255,255,.8)

}

.show-modal .modal {

    display: block

}

.show-modal .container {

    -webkit-filter: blur(4px)

}

演示：http://jsbin.com/nesewayosa/1/

只是用到了css滤镜(filter)中的blur属性。

CSS中的毛玻璃特效主要使用了filter属性里的blur（）函数，也就是高斯模糊滤镜。

但是要做一个好的毛玻璃效果，需要注意很多细节。