极客笔记如何使用HTML和CSS创建波形背景图像
概述
要构建波形背景图像，主要的角色是层叠样式表（CSS），我们将在没有使用任何svg或png图像的情况下创建一个可用于网页背景的波形背景图像。因此，要构建此组件，您应该对CSS有很好的理解，因为我们将使用CSS的定位属性以及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 - 现在选中波浪容器并为其添加样式。
#waves {
position: relative;
height: 70px;
width: 100%;
background: green;
transform: scale(1, 1);
z-index: 1;
}
步骤5 − 现在使用CSS选择器 :before 来构建内容前面的波浪形状。
#waves:before {
content: "";
position: absolute;
border-radius: 100%;
width: 100%;
height: 18rem;
background-color: rgb(233, 246, 252);
right: -35%;
top: 30px;
}
步骤6 − 现在使用CSS选择器‘ :after ’来构建内容后面的波浪形状。
#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％的高度和宽度以及透明背景。我们创建的上述波浪图像背景具有响应式设计。