Question

某些网站的背景导航栏模糊。 HTML和CSS如何实现这种透明效果？

Answer 1

你可以用两行 CSS 来做到这一点：

background: rgba(255, 255, 255, .4);
backdrop-filter: blur(10px);

如果您运行我在下面创建的完整记录的代码段，您可以看到我已将卡片和导航栏部分设为透明。我还在下方添加了 Stack Overflow 徽标以显示玻璃形态效果。因为我使用的是 Bootstrap 导航栏，所以有两点需要注意：

您需要删除默认的引导导航栏类才能应用这些效果。
如果您希望任何设计显示在下方，您需要更改导航栏的 Z-Index。

<!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">
    <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    
    <title>Glassmorphism effect by Billy for StackOverflow</title>
    <style>
        body {
            background: linear-gradient(90deg, #F38126 0, #32323A 25%); /* Apply a gradient background */ 
            font-family: 'Inter', sans-serif; /* Apply a different font */
        }

        .card {
            width: 400px; /* Width of the card */
            height: auto; /* Height of the card */
            border-radius: 1rem; /* Give the card round borders */
            padding: 2rem; /* Give the text inside the card spacing */
            margin: 2rem 4rem 4rem 5rem; /* Give the card spacing from the browser (Top, Right, Bottom, Left) */ 

            /* GLASSMORHPISM CODE */
            background: rgba(255, 255, 255, .4);
            backdrop-filter: blur(10px);
             /* GLASSMORHPISM CODE */
        }

        .card-title {
            margin-top: 0; /* Give the title spacing: top */
            margin-bottom: .5rem; /* Give the title spacing: bottom */
            font-size: 1.2rem; /* Make the title a little bigger than the text */
        }

        a {
            color: #32323A; /* Color the link at the bottom */ 
            text-decoration: none; /* Remove the default underline */ 
        }

        .shape {
            position: absolute; /* Position the shape */ 
            width: 150px;
            top: .5rem;
            left: 25rem;
        }

        .custom { 
            background: rgba(255, 255, 255, .4);
            backdrop-filter: blur(10px);
            z-index: 5; /* Make sure the image is behind the navbar, to show the effect */
        }

    </style>
</head>

<body>
    <nav class="navbar navbar-dark custom" >
        <span class="navbar-brand mb-0 h1">Navbar</span>
      </nav>

    <img class="shape" src="https://basedosdados.org/uploads/group/2020-07-08-180036.693735stackoverflow-512.png" alt="">

    <div class="card">
        <h3 class="card-title">Glassmorphism for StackOverflow</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit perferendis illum,
            placeat quod perspiciatis sequi ullam odit.</p>
        <a href="#">Read more</a>
    </div>
</body>

</html>

如何制作玻璃化导航栏？

1 个答案: