css毛玻璃

最新推荐文章于 2025-05-07 11:02:55 发布

Universitymonk

最新推荐文章于 2025-05-07 11:02:55 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/Universitymonk/article/details/115659021

本文介绍了如何使用backdrop-filter CSS属性创建毛玻璃效果，该属性允许为元素后面的区域添加模糊等图形效果。要观察到此效果，需确保元素或其背景具有透明部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a {
        height: 500px;
        width: 500px;
        position: absolute;
        top: 30vh;
        left: 40vw;
        backdrop-filter: blur(8px);
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    .b {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: url(images/business-woman-2697954_1920.jpg);
    }
</style>

<body>
    <div class="b">
        <div class="a"></div>
    </div>
</body>

</html>