css背景固定樣式background-attachment屬性基礎介紹

來源：懂視網責編：小OO 時間：2020-11-27 18:52:40

css背景固定樣式background-attachment屬性基礎介紹

一、background-attachment屬性。在CSS中，使用背景附件屬性background-attachment可以設置背景圖像是隨對象滾動還是固定不動。語法。background-attachment：scroll/fixed。說明。background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動，是默認選項；fixed表示背景圖像固定在頁面不動，只有其他的內容隨滾動條滾動。舉例。

推薦度：

點擊下載本文 文檔為doc格式

導讀一、background-attachment屬性。在CSS中，使用背景附件屬性background-attachment可以設置背景圖像是隨對象滾動還是固定不動。語法。background-attachment：scroll/fixed。說明。background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動，是默認選項；fixed表示背景圖像固定在頁面不動，只有其他的內容隨滾動條滾動。舉例。

這篇文章主要為大家帶來css背景固定樣式background-attachment屬性基礎介紹,需要的朋友可以參考下

一、background-attachment屬性

在CSS中，使用背景附件屬性background-attachment可以設置背景圖像是隨對象滾動還是固定不動。

語法：

background-attachment:scroll/fixed;

說明：

background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動，是默認選項；fixed表示背景圖像固定在頁面不動，只有其他的內容隨滾動條滾動。

舉例：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <style type="text/css">
 #p1
 {
 width:160px;
 height:1200px;
 border:1px solid gray;
 background-image:url("cartoongirl.gif");
 background-repeat:no-repeat;
 background-attachment:fixed;
 }
 </style>
</head>
<body>
 <p id="p1"></p>
</body>
</html>

在瀏覽器預覽效果如下：

css背景固定樣式background-attachment屬性基礎介紹