資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 HTML 和 CSS 建立波浪背景影像
概述
為了構建波浪背景影像，這裡主要起作用的是層疊樣式表 (CSS)，因為無需使用 svg 或 png 影像，我們將建立一個可用於網頁背景的波浪背景影像。因此，要構建此元件，您應該對 CSS 有很好的理解，因為要構建此元件，我們將使用 CSS 的 position 屬性以及 before 和 after 選擇器。因此，使用這些屬性和選擇器，我們可以實現波浪背景影像的部署。
演算法
步驟 1 − 在文字編輯器中建立一個 HTML 檔案，並在其中新增 HTML 基本結構。
步驟 2 − 現在在 body 標籤中建立兩個 div 容器。第一個容器包含波浪背景影像，第二個容器包含網頁的主要內容。
<div id="waves"> </div> <div class="main"> <p>tutorialspoint.com</p> </div>
步驟 3 − 現在在同一資料夾中建立一個 style.css 檔案，並將 style.css 檔案連結到 HTML 文件。
<link rel="stylesheet" href="style.css">
步驟 4 − 現在定位波浪容器並對其進行樣式設定。
#waves {
position: relative;
height: 70px;
width: 100%;
background: green;
transform: scale(1, 1);
z-index: 1;
}
步驟 5 − 現在使用 ‘:before’ CSS 選擇器在內容之前構建波浪的形狀。
#waves:before {
content: "";
position: absolute;
border-radius: 100%;
width: 100%;
height: 18rem;
background-color: rgb(233, 246, 252);
right: -35%;
top: 30px;
}
步驟 6 − 現在使用 ‘:after’ CSS 選擇器在內容之後構建波浪的形狀。
#waves:after {
content: "";
position: absolute;
border-radius: 100%;
width: 100%;
height: 18rem;
background-color: green;
left: -30%;
top: -185px;
}
步驟 7 − 定位主要容器，並使其相對於波浪容器的位置固定。
.main{
z-index: 999;
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
color: green;
font-weight: 900;
font-size: 5vw;
font-family: 'Segoe UI';
top: 1;
}
p{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
步驟 8 − 波浪背景影像已準備就緒。
示例
在這個示例中，我們將建立用於網頁的波浪背景影像。為此，我們建立了兩個檔案，即 index.html 和 style.css。HTML 檔案包含包含 css 自定義背景影像的容器以及主要內容父容器。
<html>
<head>
<title>Wave Background using CSS</title>
<link rel="stylesheet" href="style.css">
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
background-color: rgb(233, 246, 252);
}
#waves {
position: relative;
height: 70px;
width: 100%;
background: green;
transform: scale(1, 1);
z-index: 1;
}
#waves:before {
content: "";
position: absolute;
border-radius: 100%;
width: 100%;
height: 18rem;
background-color: rgb(233, 246, 252);
right: -35%;
top: 30px;
}
#waves:after {
content: "";
position: absolute;
border-radius: 100%;
width: 100%;
height: 18rem;
background-color: green;
left: -30%;
top: -185px;
}
.main{
z-index: 999;
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
color: green;
font-weight: 900;
font-size: 5vw;
font-family: 'Segoe UI';
top: 1;
}
p{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="waves">
</div>
<div class="main">
<p>tutorialspoint.com</p>
</div>
</body>
</html>
下面給出的影像顯示了上述內容的輸出，其中頁面中使用的背景不是任何型別的影像，而是自定義的波浪背景影像。現在，我們可以在網頁的任何部分使用此背景。
結論
在上面的示例中，我們建立了一個簡單且基本的波浪背景影像，因此我們可以自定義背景並使用新的自定義背景進行構建。有時，影像不會為應用程式提供良好的介面，因此開發人員可以自定義自己的背景，從而使使用者介面煥然一新。在上面的示例中，我們還建立了第二個主容器，因此需要將其設定為固定，因為它充當具有 100% 高度和寬度以及透明背景的背景容器上的疊加層。我們建立的上述波浪背景影像本質上是響應式的。
2K+ 閱讀量
