数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 HTML 和 CSS 创建波浪背景图像
概述
为了构建波浪背景图像，这里主要起作用的是层叠样式表 (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 − 现在定位波浪容器并对其进行样式设置。
#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% 高度和宽度以及透明背景的背景容器上的叠加层。我们创建的上述波浪背景图像本质上是响应式的。
2K+ 阅读量
