站長資訊網在這篇《用CSS快速創建高級模糊感的背景圖像》中給大家介紹了使用CSS快速創建高級模糊感的背景圖像的方法，感興趣的朋友可以去了解一下~
那么本文咱們再給大家介紹一種用css快速實現波浪背景的方法，保證讓你的頁面擁有個性的背景，當然還有什么想要實現的背景風格大家可以評論告訴我！
注：本文將使用before選擇器輕松生成波浪背景，并且會使用到 .png 文件格式的波形圖像，可以自行創建或從此處下載。
下面我們就先直接上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title> 如何使用CSS創建波浪背景 ? </title> <style> body { padding: 0%; margin: 0%; } .demo { 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://img.php.cn/upload/article/000/000/020/611f4b147b431604.png); background-size: cover; background-repeat: no-repeat; } </style> </head> <body> <section class="pattern"> <div class="demo"> <h1>PHP中文網</h1> </div> </section> </body> </html>
效果如下：
在上述代碼中，首先，我們將為該部分添加一個基本背景，然后使用before選擇器將波形 png 文件設置在我們的背景之上就可以實現波浪背景效果！
注：
<section> 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。（<section> 標簽是 HTML 5 中的新標簽。），并且所有瀏覽器都支持 <section> 標簽。
:before 選擇器在被選元素的內容前面插入內容。（使用 content 屬性來指定要插入的內容。），并且在對于 IE8 及更早版本中的 :before，必須聲明 <!DOCTYPE>。
PHP中文網平臺有非常多的視頻教學資源，歡迎大家學習《css視頻教程》！
