通过使用以下命令可以轻松生成波浪背景之前选择器。我们将使用.png文件格式的波形图像, 你可以自行创建或从中下载这里.
HTML代码：在本节中, 我们将设计代码的基本结构。
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
< title >
How to Create Wave Background using CSS ?
</ title >
</ head >
< body >
< section class = "pattern" >
< div class = "geeks" >
< h1 >GEEKS FOR GEEKS</ h1 >
</ div >
</ section >
</ body >
</ html >CSS代码：在本节中, 我们将使用一些CSS属性来设计波浪背景。首先, 我们将为该部分添加基本背景, 然后使用之前选择器, 将wave png文件设置在背景顶部。
<style>
body {
padding : 0% ;
margin : 0% ;
}
.geeks {
padding : 200px ;
text-align : center ;
}
section {
width : 100% ;
min-height : 500px ;
}
.pattern {
position : relative ;
background-color : #3bb78f ;
background-image : linear-gradient( 315 deg, #3bb78f 0% , #0bab64 74% );
}
.pattern:before {
content : "" ;
position : absolute ;
bottom : 0 ;
left : 0 ;
width : 100% ;
height : 215px ;
background : url (wave.png);
background- size : cover;
background-repeat : no-repeat ;
}
</style>完整的代码：它是以上两个代码部分的组合。
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
< title >
How to Create Wave Background using CSS ?
</ title >
< style >
body {
padding: 0%;
margin: 0%;
}
.geeks {
padding: 200px;
text-align: center;
}
section {
width: 100%;
min-height: 300px;
}
.pattern {
position: relative;
background-color: #3bb78f;
background-image: linear-gradient(315deg, #3bb78f 0%, #0bab64 74%);
}
.pattern:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 250px;
background: url(
https://media.lsbin.org/wp-content/uploads/20200326181026/wave3.png);
background-size: cover;
background-repeat: no-repeat;
}
</ style >
</ head >
< body >
< section class = "pattern" >
< div class = "geeks" >
< h1 >GEEKS FOR GEEKS</ h1 >
</ div >
</ section >
</ body >
</ html >输出如下：
