首頁 > 文章 > web前端 > 巧用css將背景影像固定在視窗

巧用css將背景影像固定在視窗

醉折花枝作酒筹原創: 2021-08-12 16:38:281749瀏覽

上一篇文章中我們了解了元素設定背景的方法，請看《一招搞定css元素五彩斑斕的背景》。這次我們來了解將背景影像固定在視口的方法，有需要的可以參考參考。

當我們想要將背景圖片進行固定的時候，我們該怎麼做？

  <style>
    body{
      background-image: url("images/1.jpg");
      background-repeat:no-repeat;
      background-attachment:fixed;
    }
  </style>
</head>
<body>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
</body>

這個小例子的結果是

巧用css將背景影像固定在視窗

#我們可以看到這個小例子的背景真的沒有隨文字的移動而改變哎。知道這麼多之後，我們去看一下什麼屬性可以設定背景固定吧。

background-attachment屬性設定背景圖像是否固定或隨著頁面的其餘部分滾動。

這個屬性的值有好幾個，其中scroll是預設值。表示背景圖像會隨著頁面其餘部分的滾動而移動，而fixed則表示當頁面的其餘部分滾動時，背景圖像不會移動。還有一個值是local，此關鍵屬性值表示背景相對於元素的內容固定。如果一個元素擁有滾動機制，背景將會隨著元素的內容滾動，並且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。

推薦學習：css影片教學

以上是巧用css將背景影像固定在視窗的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css讓圖片居中的方法有哪些下一篇：css讓圖片居中的方法有哪些

看更多