/* CSS代码 */
.container {
position: relative;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
background-color: #fff;
padding: 20px;
}
.content:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: url(https://www.w3schools.com/w3images/img_forest.jpg);
opacity: 0.1;
z-index: -1;
filter: blur(10px);
}首先，大家需要创建一个容器元素(.container)，并在其中添加两个子元素。第一个子元素(.background)将用于创建半透明黑色背景，以及分配一个z-index的值。第二个子元素(.content) 是磨砂玻璃效果的主要元素，它会有一个白色的背景颜色和阴影。这两个元素的位置也需要设置为相对和绝对位置。
现在让大家创建一个伪元素(:before)，并将其放置在大家的内容元素(.content)之上。这个伪元素将是大家的实际磨砂玻璃效果，大家将使用图像作为其背景，并设置其透明度和模糊值。这将使内容看起来有强烈的磨砂玻璃效果，通过降低背景图形的亮度来模拟它的外观。
CSS的纯色磨砂玻璃效果可以提高网站的美观度和用户体验。通过使用本文提供的方法，你可以在没有图像的情况下轻松地创建磨砂玻璃效果，这将使你的网站更加专业和现代化。