如何不使用 JavaScript 在行動裝置上建立固定背景圖片？

固定背景的方法：移動視角

透過在各種裝置上無縫縮放的背景圖像來增強網頁美感可能是一個挑戰。特別是，在 iPhone 和 iPad 等行動平台上實現固定背景效果存在獨特的障礙。

為了解決這個問題，CSS 解決方案已被廣泛採用，其中包含背景大小等屬性：封面和背景- 附件：固定。然而，它在行動裝置上表現不佳，導致背景圖像過大，持續超出視口，並透過過度滾動顯示重複內容。

幸運的是，出現了一種替代方法，可以克服這些限制，而無需求助於 JavaScript。透過在偽元素之前引入一個 body:before ，我們可以在行動裝置上建立一個固定的背景。

此方法的CSS 程式碼如下：

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

該方法建立一個偽元素- 位於網頁上所有其他元素後面的元素，從而產生可在行動裝置上適當縮放的非侵入式固定背景。負 z-index 值確保偽元素保留在後台。

透過實施此解決方案，開發人員可以有效地建立具有固定背景影像的視覺吸引力網頁，從而增強所有裝置（包括行動裝置）上的使用者體驗平台。

以上是如何不使用 JavaScript 在行動裝置上建立固定背景圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！