css背景图片高斯模糊_css3实现背景模糊的三种方式(小结)

一、普通背景模糊

代码：

html,

body {

width: 100%;

height: 100%;

}

* {

margin: 0;

padding: 0;

}

/*背景模糊*/

.bg {

width: 100%;

height: 100%;

position: relative;

background: url("./bg.jpg") no-repeat fixed;

background-size: cover;

box-sizing: border-box;

filter: blur(2px);

z-index: 1;

}

.content {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: 200px;

height: 200px;

text-align: center;

z-index: 2;

}

背景模糊

效果如下所示：