站長(zhǎng)資訊網(wǎng)在這篇《用CSS快速創(chuàng)建高級(jí)模糊感的背景圖像》中給大家介紹了使用CSS快速創(chuàng)建高級(jí)模糊感的背景圖像的方法，感興趣的朋友可以去了解一下~
那么本文咱們?cè)俳o大家介紹一種用css快速實(shí)現(xiàn)波浪背景的方法，保證讓你的頁(yè)面擁有個(gè)性的背景，當(dāng)然還有什么想要實(shí)現(xiàn)的背景風(fēng)格大家可以評(píng)論告訴我！
注：本文將使用before選擇器輕松生成波浪背景，并且會(huì)使用到 .png 文件格式的波形圖像，可以自行創(chuàng)建或從此處下載。
下面我們就先直接上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title> 如何使用CSS創(chuàng)建波浪背景 ? </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中文網(wǎng)</h1> </div> </section> </body> </html>
效果如下：
在上述代碼中，首先，我們將為該部分添加一個(gè)基本背景，然后使用before選擇器將波形 png 文件設(shè)置在我們的背景之上就可以實(shí)現(xiàn)波浪背景效果！
注：
<section> 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。（<section> 標(biāo)簽是 HTML 5 中的新標(biāo)簽。），并且所有瀏覽器都支持 <section> 標(biāo)簽。
:before 選擇器在被選元素的內(nèi)容前面插入內(nèi)容。（使用 content 屬性來(lái)指定要插入的內(nèi)容。），并且在對(duì)于 IE8 及更早版本中的 :before，必須聲明 <!DOCTYPE>。
PHP中文網(wǎng)平臺(tái)有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
