如何使用 HTML 和 CSS 创建波浪形背景图片

htmlcssweb developmentfront end technology更新于 2024/6/16 11:56:17

概述

要创建波浪形背景图片，这里主要使用层叠样式表 (CSS)，因为我们无需使用 SVG 或 PNG 图片，只需创建一个可用于网页背景的波浪形图片即可。因此，要构建此组件，您需要对 CSS 有深入的了解，因为在构建此组件时，我们将使用 CSS 的position属性以及before和after选择器。因此，使用这些属性和选择器，我们可以实现波形图像背景的部署。

算法

步骤 1 − 在文本编辑器中创建一个 HTML 文件，并在其中添加 HTML 样板代码。

步骤 2 − 现在在 body 标签中创建两个 div 容器。第一个容器包含波形图像背景，另一个容器包含网页的主要内容。

<div id="waves">
</div>
<div class="main">
   <p>tutorialspoint.com</p>
</div>

步骤 3− 现在在同一文件夹中创建一个 style.css 文件，并将该 style.css 文件链接到 HTML 文档。

<link rel="stylesheet" href="style.css">

步骤 4 − 现在定位 wave 容器并设置其样式。

#waves {
   position: relative;
   height: 70px;
   width: 100%;
   background: green;
   transform: scale(1, 1);
   z-index: 1;
}

步骤 5 − 现在使用':before' CSS 选择器在内容之前构建波浪的形状。

#waves:before {
   content: "";
   position: absolute;
   border-radius: 100%;
   width: 100%;
   height: 18rem;
   background-color: rgb(233, 246, 252);
   right: -35%;
   top: 30px;
}

步骤 6 − 现在使用 ':after' CSS 选择器在内容后构建波浪的形状。

#waves:after {
   content: "";
   position: absolute;
   border-radius: 100%;
   width: 100%;
   height: 18rem;
   background-color: green;
   left: -30%;
   top: -185px;
}

步骤 7 − 定位主容器并使其位置相对于波浪容器固定。

.main{
   z-index: 999;
   position: fixed;
   width: 100%;
   height: 100vh;
   text-align: center;
   color: green;
   font-weight: 900;
   font-size: 5vw;
   font-family: 'Segoe UI';
   top: 1;
}
p{
   position: absolute;
   bottom: 0;
   width: 100%;
   text-align: center;
}

步骤 8−波浪图像背景已完成。

示例

在此示例中，我们将创建用于网页的波浪图像背景。为此，我们创建了两个文件:index.html 和 style.css。HTML 文件包含一个容器，该容器包含 CSS 自定义背景图像，以及主内容父容器。

<html>
<head>
   <title>Wave Background using CSS</title>
   <link rel="stylesheet" href="style.css">
   <style>
      body {
         overflow: hidden;
         margin: 0;
         padding: 0;
         background-color: rgb(233, 246, 252);
      }
      #waves {
         position: relative;
         height: 70px;
         width: 100%;
         background: green;
         transform: scale(1, 1);
         z-index: 1;
      }
      #waves:before {
         content: "";
         position: absolute;
         border-radius: 100%;
         width: 100%;
         height: 18rem;
         background-color: rgb(233, 246, 252);
         right: -35%;
         top: 30px;
      }
      #waves:after {
         content: "";
         position: absolute;
         border-radius: 100%;
         width: 100%;
         height: 18rem;
         background-color: green;
         left: -30%;
         top: -185px;
      }
      .main{
         z-index: 999;
         position: fixed;
         width: 100%;
         height: 100vh;
         text-align: center;
         color: green;
         font-weight: 900;
         font-size: 5vw;
         font-family: 'Segoe UI';
         top: 1;
      }
      p{
         position: absolute;
         bottom: 0;
         width: 100%;
         text-align: center;
      }
   </style>
</head>
<body>
   <div id="waves">
   </div>
   <div class="main">
      <p>tutorialspoint.com</p>
   </div>
</body>
</html>

下图展示了上述代码的输出，其中页面中使用的背景并非任何类型的图像，而是自定义的波形图像背景。现在，我们可以在网页的任何部分使用此背景。

结论

在上面的示例中，我们创建了一种简单且基础的波形图像背景，因此我们可以自定义背景，并可以使用新的自定义背景进行构建。有时，图像无法为应用程序提供良好的界面，因此开发人员可以自定义背景，从而为用户界面带来全新的外观。在上面的示例中，我们还创建了第二个主容器，因此需要将该容器设置为固定容器，因为它会覆盖在背景容器上，其高度和宽度均为 100%，并且背景透明。我们创建的上述波形图像背景本质上是响应式的。