溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用CSS創(chuàng)建波浪背景”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用CSS創(chuàng)建波浪背景”吧！
注：本文將使用before選擇器輕松生成波浪背景，并且會使用到 .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">
<h2>億速云</h2>
</div>
</section>
</body>
</html>效果如下：
在上述代碼中，首先，我們將為該部分添加一個基本背景，然后使用before選擇器將波形 png 文件設置在我們的背景之上就可以實現(xiàn)波浪背景效果！
注：
<section> 標簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。（<section> 標簽是 HTML 5 中的新標簽。），并且所有瀏覽器都支持 <section> 標簽。
:before 選擇器在被選元素的內容前面插入內容。（使用 content 屬性來指定要插入的內容。），并且在對于 IE8 及更早版本中的 :before，必須聲明 <!DOCTYPE>。
感謝各位的閱讀，以上就是“怎么用CSS創(chuàng)建波浪背景”的內容了，經(jīng)過本文的學習后，相信大家對怎么用CSS創(chuàng)建波浪背景這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
