html盒子毛玻璃效果,css毛玻璃效果（外加background属性）

前因：

后果，二话不说，上效果：

注意：此方法只适合body设置背景图时的模糊。

页面布局方面，主要父元素为body，子元素为想要的效果，涉及到的知识点：background、filter、定位、伪元素、flex布局(主要为子元素水平居中使用)、z-index=-1也是很重要的一个点。background

background: url('./timg1.jpg') no-repeat center fixed;

分别对应：背景图片地址、平铺效果、滚动、位置

同时也要标注背景图片尺寸background-size

background-size: cover;

上图：

定位

常说的一句话“子绝父相”

伪元素

布局中用了很多伪元素

z-index=-1，通过设置使父元素内容在内容下面

代码：

html>

毛玻璃效果

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body,

.item::before {

background: url('./timg1.jpg') no-repeat center fixed;

background-size: cover;

}

body {

height: 100vh;

width: 100vw;

display: flex;

justify-content: center;

align-items: center;

}

.item {

position: relative;

width: auto;

height: auto;

padding: 30px;

border-radius: 10px;

box-shadow: 0 0 5px 1px #fff;

color: #fff;

font-size: 15px;

font-weight: lighter;

line-height: 35px;

overflow: hidden;

}

.item::before {

content: '';

display: block;

position: absolute;

z-index: -1;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: -20px;

filter: blur(10px);

/* blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，

或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 */

}

没有什么比时间更具有说服力了，

因为时间无需通知我们就可以改变一切。

——《活着》

若有不正确的地方请各位大佬指出，更多内容请参考：