一些网站有模糊背景导航条。如何用HTML实现这样的透明效果呢?CSS呢?
你可以用两行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>