使用css制作出磨砂透明效果

在CSS中，要创建磨砂透明效果，我们通常使用backdrop-filter属性，它允许你对位于元素后面的区域应用图形效果，如模糊或亮度。配合background颜色的透明度设置，你可以轻松地实现磨砂透明效果。

以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>磨砂透明效果</title>
    <style>
        .frosted-glass {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.3); /* 设置背景颜色为白色，并带有一定的透明度 */
            backdrop-filter: blur(10px); /* 对背后的内容应用10像素的模糊效果 */
            border-radius: 10px; /* 添加圆角 */
            padding: 20px;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }

        /* 为了更好地展示效果，我们添加一些内容和一个背景图像 */
        body {
            background-image: url('https://example.com/path-to-your-image.jpg'); /* 替换为你的背景图像链接 */
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .frosted-glass p {
            color: #333; /* 文本颜色 */
            font-size: 16px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="frosted-glass">
        <p>这是磨砂透明效果的内容。</p>
    </div>
</body>
</html>