資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 CSS 中建立多個背景影像視差效果？
視差滾動是一種常用的設計技巧，可以為網頁新增動感和深度。這是透過以不同的速度移動單獨的頁面元素來模擬平面上的深度效果來實現的。使用 CSS 中的多個背景影像是一種獨特而富有創意的方法來實現此技術。在本文中，我們將探討如何在 CSS 中建立多背景影像視差效果，包括設定 HTML 結構的步驟以及建立所需效果所需的 CSS 樣式。無論您是初學者還是經驗豐富的前端開發人員，本指南都將為您提供建立網站上令人驚歎的多背景影像視差效果所需的知識和工具。
語法
element {
background-image: url(image-location.jpg);
}
background-image 屬性
CSS 中的 background-image 屬性用於指定一個或多個要作為 HTML 元素背景使用的影像。這提供了將一個或多個影像用作元素背景的功能。影像可以位於元素的特定區域，可以設定為水平或垂直重複，或者可以調整大小以覆蓋整個元素或其一部分。
element {
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
動畫屬性
CSS 動畫屬性提供了在 HTML 元素上建立動畫的功能，無需 JavaScript 的幫助。此屬性使您能夠指定一系列描述元素在給定時間段內如何更改的關鍵幀。這些關鍵幀用於指定元素在不同時間點的樣式，而動畫屬性控制元素如何從一個關鍵幀過渡到另一個關鍵幀。
以下是動畫屬性每個組成部分的簡要說明：
名稱 - 動畫的名稱，用於在 @keyframes 規則中引用它。
持續時間 - 動畫的持續時間，表示動畫完成需要持續多長時間，以時間字串值（例如“5s”）秒錶示。
時間函式 - 動畫的速度曲線，可以將其設定為線性、緩動、緩入、緩出、緩入緩出或自定義 cubic-bezier 函式。
延遲 - 開始動畫之前的延遲時間，以秒為單位（例如，“2s”）。
迭代次數 - 動畫應執行的迭代次數，或術語“無限”以指示動畫應無限迴圈。
方向 - 動畫的方向，可以是“normal”以正常方向開始，“reverse”以相反方向開始，或“alternate”以交替向前和向後開始。
填充模式 - 指定如何填充動畫的非活動狀態，選項包括“none”、“forwards”、“backwards”或“both”。
播放狀態 - 指示動畫是處於運動狀態還是暫停狀態，分別由值“running”或“paused”表示。
方法
要在 CSS 中使用多個背景影像建立視差效果，應遵循一系列說明：
提供一個將包含背景影像的容器元素。在本例中，該元素是一個名為 parallax-container 的 div。
定義容器元素的高度和寬度，並將 overflow 屬性設定為 hidden。這將確保僅顯示影像的可見部分。此外，position 屬性設定為 relative 以確保背景影像的位置相對於容器。
為每個背景影像建立單獨的元素，並將它們的位置設定為 absolute。這允許您在容器元素內精確放置每個影像。每個元素的高度和寬度都設定為 100%，以便它們填充整個容器。
透過使用 background-image 屬性為每個元素設定背景影像。確保為每個單獨的影像提供正確的檔案路徑。
為每個元素建立一個動畫，該動畫將沿著 X 軸移動背景影像。這是使用 animation 屬性結合 @keyframes 規則完成的。translateX 屬性用於移動元素，您為該屬性設定的值決定了元素在水平方向上移動的距離。
為了保持流暢和連續的動畫體驗，animation-timing-function 屬性被分配了一個線性值，表示在整個過程中動畫的持續進展。此外，animation-iteration-count 屬性被配置為具有無限值，表示動畫無限重複，對迴圈次數沒有預定義的限制。
示例
以下是我們將在此示例中檢視的完整程式碼：
<!DOCTYPE html>
<html>
<head>
<title>How to create multiple background image parallax in CSS?</title>
<style>
.parallax-container {
height: 200px;
width: 100%;
overflow: hidden;
position: relative;
}
.layer-1,
.layer-2,
.layer-3 {
background-position: center;
background-size: cover;
position: absolute;
height: 200px;
width: 100%;
}
.layer-1 {
background-image: linear-gradient(red,orange);
animation: move-layer-1 15s linear infinite;
}
.layer-2 {
background-image: linear-gradient(blue,lightblue);
animation: move-layer-2 20s linear infinite;
}
.layer-3 {
background-image: linear-gradient(green,lightgreen);
animation: move-layer-3 25s linear infinite;
}
@keyframes move-layer-1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-30%);
}
}
@keyframes move-layer-2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-60%);
}
}
@keyframes move-layer-3 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-90%);
}
}
</style>
</head>
<body>
<h4>How to create multiple background image parallax in CSS?</h4>
<div class="parallax-container">
<div class="layer-1"></div>
<div class="layer-2"></div>
<div class="layer-3"></div>
</div>
</body>
</html>
結論
總之，在 CSS 中建立多層背景影像視差效果是一種簡單而強大的技術，可以為您的網站新增維度和動畫。透過遵循本文中描述的說明，您可以為您的觀眾創造一種視覺上令人愉悅且引人入勝的體驗，這種體驗將被長期銘記。無論您的設計目標是基本的還是複雜的，CSS 的靈活性都使您可以根據您的特定需求定製您的設計。因此，為什麼不踏上這段旅程並探索設計潛力以獲得顯著成果呢！
2K+ 次檢視
