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

问题一css

一、简述问题html

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

二、问题解决svg

.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 */

}

实现

如今已经能够显示背景的毛玻璃效果了，可是又出现了问题。url

问题二spa

一、问题简述code

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

二、问题解决htm

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

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