html使背景图片毛玻璃效果,css实现背景图片的毛玻璃效果

问题一

1、简述问题

最近在做登录页面的时候，遇到了一个问题：将登录页面的背景图片，设置为毛玻璃效果。在网上找到了关于这方面的资料。

2、问题解决

.blur {

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

background-position: center;

background-size: cover;

height: 1300px;

-webkit-filter: blur(10px); /* Chrome, Opera */

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

}

实现

现在已经可以显示背景的毛玻璃效果了，但是又出现了问题。

问题二

1、问题简述

当我们再写一个div的时候，以为背景图片也是占有空间的，这时候，就会把红色的div挤出来，name如何来解决。

2、问题解决

将我们新设置的div，设置一个新的属性，position：fixed；将红色的div固定在顶部。

这时，我们在红色的div中写上内容就行了；