效果
毛玻璃效果图
实现代码
css主要部分:
* {
padding: 0;
margin: 0;
color: #333;
}
body
, #box::before {
background-image: url(img/1.jpg);
background-size: cover;
background-attachment: fixed;
background-position: top center;
}
#box::before
, .center {
margin: auto;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
#box {
width: 550px;
height: 350px;
border-radius: 10px;
padding: 10px;
box-shadow: -4px 0 4px #0003
, 0 -4px 4px #0003
, 4px 0 4px #0003
, 0 4px 4px #0003;
background: #FFF4;
left: auto;
right: 15%;
}
#box::before {
content: '';
display: block;
z-index: -1;
width: 100%;
height: 100%;
filter: blur(3px);
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="box" class="center">
<p style="font-size: 1.5rem;">毛玻璃表面不平整，光线通过毛玻璃被反射后向四面八方射出去
(因为毛玻璃表面不是光滑的平面，使光产生了漫反射)，折射到视网膜上已经是不完整的像，
于是就看不见玻璃背后的东西了。 当毛玻璃上贴了透明胶布，毛玻璃的表面又变得平整了，
光线可以完整被反射，所以，在视网膜上又呈现出完整的像，因而，眼睛又能看到物体了。另外，
用湿布擦毛玻璃也能看清楚。</p>
</div>
</body>
</html>
实现思路
通过背景+模糊背景+透明底色实现毛玻璃的效果，主要用到了以下属性
background-size: cover; /* 让图片覆盖整个背景区域 */
background-attachment: fixed;
filter: blur(3px); /* 对背景进行模糊 */
z-index: -1; /* 让模糊层在父元素的最底层显示 */
