首頁 > 文章 > web前端 > 如何在CSS中建立多個背景影像視差？

如何在CSS中建立多個背景影像視差？

WBOY轉載: 2023-08-28 23:37:021426瀏覽

如何在CSS中建立多個背景影像視差？

視差滾動是一種經常使用的設計技術，它為網頁增加了運動和深度的感覺。這是透過以不同的速度移動獨立的頁面元素來模擬平面表面上的深度效果。一種獨特而富有想像力的實現這種技術的方法是在CSS中利用多個背景圖像。在本文中，我們將探討如何在CSS中建立多個背景影像的視差效果，包括設定HTML結構和CSS樣式所需的步驟。無論您是初學者還是經驗豐富的前端開發人員，本指南都將為您提供創建令人驚嘆的多個背景圖像視差效果所需的知識和工具。

文法

element {
   background-image: url(image-location.jpg);
}

背景圖片屬性

CSS中的background-image屬性用於指定一張或多張圖片作為HTML元素的背景。這使得能夠合併一張或多張圖片作為元素的基礎。圖片可以位於元素的特定區域，可以設定為水平或垂直複製，或者可以調整大小以覆蓋整個元素或僅覆蓋其中的一部分。

element {
   animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

動畫屬性

CSS動畫屬性賦予了在HTML元素上建立動畫的能力，無需使用JavaScript的幫助。該屬性使您能夠描述元素在給定時間內的修改過程中的一系列關鍵影格。這些關鍵影格用於表示元素在不同時間點的樣式，而動畫屬性則控制元素從一個關鍵影格到另一個關鍵影格的轉換方式。

以下是對動畫屬性的每個組成部分的簡明解釋 -

名稱 - 動畫的命名法，用於在 @keyframes 規則中引用它。
持續時間 - 動畫的持續時間，代表動畫應該持續的時間段，以秒為單位，使用時間字串值（例如"5s"）來表示。
Timing-function − 動畫的速度軌跡，可以透過線性、緩入、緩出、緩入緩出或自訂的cubic-bezier函數進行操控。
延遲 − 在啟動動畫之前的延遲時間，以秒為單位進行測量（例如，"2s"）。
Iteration-count - 動畫應執行的迭代計數，或術語「無限」表示動畫應繼續無限循環。
Direction - 動畫的軌跡，可以是「正常」（沿著通常方向）、「反向」（沿相反方向）或「備用」交替前進和後退。
填滿模式 − 指定滿足動畫的非操作狀態的方法，選項包括"none"、"forwards"、"backwards"或"both"。
Play-state - 表示動畫是否處於運動狀態或暫停狀態，分別以數值「執行」或「暫停」表示。
李>

方法

要在CSS中使用多個背景影像產生視差效果，應該按照一系列的指令進行操作 −
#提供一個包含環境描繪的組成部分。在當前情況下，該組件是一個帶有標籤為parallax-container的div。
定義容器元素的高度和寬度，並將overflow屬性設為隱藏。這將確保僅顯示影像的可見部分。此外，position 屬性設定為relative 以確保背景影像的位置是相對於容器的。
為每個背景圖像建立單獨的元素，並將它們的位置設為絕對定位。這樣可以精確地在容器元素中定位每個影像。每個元素的高度和寬度都設定為100%，以便填充整個容器。
透過使用background-image屬性為每個元素設定背景圖像。確保為每個單獨的影像提供準確的檔案路徑。
為每個元素建立一個動畫，以沿著 X 軸移動背景影像。這是使用動畫屬性結合 @keyframes 規則來完成的。 TranslateX 屬性用於移動元素，您為此屬性設定的值決定了元素在水平方向上移動的距離。
為了保持平滑連續的動畫體驗，animation-timing-function屬性被指派了一個linear的值，表示動畫在整個過程中保持一致的前進。此外，animation-iteration-count屬性被配置為無限值，表示動畫無限重複，沒有預先定義的循環次數限制。

Example

的翻譯為：

範例

以下是我們將在本範例中查看的完整程式碼 -

<!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 的靈活性都使您能夠自訂您的設計，以滿足您獨特的先決條件。因此，何不踏上這段旅程，探索設計潛力，取得非凡成果！

以上是如何在CSS中建立多個背景影像視差？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 CSS 指定類別的順序？下一篇：如何使用 CSS 指定類別的順序？

看更多