用HTML和CSS设计一个磨砂玻璃的效果

在这篇文章中，我们将使用bootstrap 4卡片类实现磨砂玻璃的效果。下面的图片是本文的最终结果，你将得到的最终输出。

步骤:

1.Styling the body:让我们首先设置网页的背景。在你的head标签下的<style>标签中编写下面的代码。如果你已经设置了背景属性(你应该已经设置了)，那么跳到下一节。如果没有，给你。

body {
     background-image: url('background.jpg');
     background-repeat: no-repeat;
     background-size: 100%;
     background-attachment: fixed;
}

你可以在这里阅读有关上述房产的信息

2.Frost glass card:在style标签下，使用以下代码。

.card {
      box-shadow: 0 0 5px 0 ;
      background: inherit;
      backdrop-filter: blur(10px);
      <!--margin: 100px; according to your need-->
}

那么，我们在这里有什么呢。

box-shadow : 这个属性用来给一个元素的框架提供类似阴影的效果。
background : 使用它可以使元素透明，并具有与你的网页相同的背景（在body类中，必须有 “background-attachment: fixed,”）。
backdrop-filter : 使用它来对元素后面的区域施加效果。( 也请阅读这个 ) 基本上，这是减少很多CSS样式的属性。
margin :边距和填充是根据你的需要而定。

注意：Mozilla的浏览器Firefox出现了问题，在一些情况下，背景墙-过滤器不能正常工作，chrome和edge工作正常。

3. <div>在正文中

<body>
    <div class="container">
        <div class="card card-body" style="justify-content: center;">
            <!--Contents <h1 >_______</h1> -->
        </div>
    </div>
</body>

最终代码:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  
    <style>
        body {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-attachment: fixed;
        }
          
        h1 {
            color: white;
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
          
        .card {
            top: 50%;
            box-shadow: 0 0 5px 0;
            background: inherit;
            backdrop-filter: blur(10px);
            margin: 100px;
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <div class="container">
        <div class="card card-body" 
            style="justify-content: center;">
            <h1>GeeksforGeeks</h1>
        </div>
    </div>
</body>
  
</html>

输出:

用HTML和CSS设计一个磨砂玻璃的效果