<div>背景固定是一種CSS屬性，它可以使一個元素的背景圖片保持在固定的位置上，即使滾動頁面時，背景圖片不會隨之滾動。這種技術常常用于創建視差滾動效果或為網頁添加獨特的視覺效果。</div>

下面我們來看幾個代碼案例詳細解釋說明背景固定的用法：

案例一：背景固定的基本使用

<p>html, body {</p>
<p>  height: 100%;</p>
<p>  margin: 0;</p>
<p>  padding: 0;</p>
<p>}</p>
<p>.background {</p>
<p>  background-image: url("background.jpg");</p>
<p>  background-attachment: fixed;</p>
<p>  background-position: center;</p>
<p>  background-repeat: no-repeat;</p>
<p>  background-size: cover;</p>
<p>  height: 100%;</p>
<p>}</p>

在上面的代碼中，我們定義了一個名為.background的類，它包含了一個背景圖片。通過設置background-attachment屬性為fixed，我們使背景圖片保持固定的位置。此外，我們還設置了background-position為center，這樣背景圖片就會在元素的中間進行居中對齊。

案例二：背景固定與視差滾動效果

<p>html, body {</p>
<p>  height: 100%;</p>
<p>  margin: 0;</p>
<p>  padding: 0;</p>
<p>}</p>
<p>.parallax-container {</p>
<p>  height: 100%;</p>
<p>  perspective: 500px;</p>
<p>}</p>
<p>.parallax-layer {</p>
<p>  background-attachment: fixed;</p>
<p>  background-position: center;</p>
<p>  background-repeat: no-repeat;</p>
<p>  background-size: cover;</p>
<p>  height: 100%;</p>
<p>  transform-style: preserve-3d;</p>
<p>  transform: translateZ(-100px) scale(2);</p>
<p>}</p>

在這個案例中，我們使用透視屬性perspective和變換屬性transform結合背景固定來實現視差滾動效果。容器元素.parallax-container設置了透視屬性perspective的值為500px。而.parallax-layer則具有背景固定的樣式，并利用變換屬性transform在Z軸上做了位移，同時進行了縮放。通過這些設置，我們可以在滾動頁面時創建出一種立體感的視差滾動效果。

案例三：背景固定與滾動文本

<p>html, body {</p>
<p>  height: 100%;</p>
<p>  margin: 0;</p>
<p>  padding: 0;</p>
<p>}</p>
<p>.header {</p>
<p>  background-attachment: fixed;</p>
<p>  background-image: url("header.jpg");</p>
<p>  background-position: center;</p>
<p>  background-repeat: no-repeat;</p>
<p>  background-size: cover;</p>
<p>  color: #ffffff;</p>
<p>  height: 100vh;</p>
<p>  padding: 50px;</p>
<p>  text-align: center;</p>
<p>}</p>

在上述代碼中，我們創建了一個具有固定背景和滾動文本的頂部導航欄。通過設置background-attachment為fixed，我們實現了導航欄的背景圖片固定。背景圖片采用了居中對齊的方式，并且通過設置background-size為cover來保證背景圖片的完整性。同時，我們還設置了一些其他樣式來使導航欄具有良好的可讀性。

這些代碼案例展示了背景固定在網頁設計中的不同運用方式。通過合理運用背景固定技術，我們可以為網頁添加獨特的視覺效果，提升用戶體驗。無論是創建視差滾動效果、制作立體感的扁平設計，還是使文字與背景圖片交織在一起，背景固定都能發揮作用。