如何使用CSS创建波浪背景（代码示例）

文章图片
通过使用以下命令可以轻松生成波浪背景之前选择器。我们将使用.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代码：在本节中, 我们将使用一些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 >

输出如下：