CSS background-attachment屬性用法及代碼示例

background-attachment 屬性用於指定背景圖像是固定的還是隨瀏覽器窗口中頁麵的其餘部分滾動。

此屬性具有滾動、固定和本地三個值。它的默認值是滾動，這會導致元素不隨其內容滾動。此屬性的本地值導致元素隨內容滾動。如果我們將該值設置為fixed，則在瀏覽器中滾動時背景圖像不會移動。

此 CSS 屬性可以支持多個背景圖像。我們可以為每個 background-image 指定不同的 background-attachment 屬性值，用逗號分隔。每個圖像都將與此屬性的相應值匹配。

用法

background-attachment:scroll | fixed | local | initial | inherit;

該屬性的值定義如下。

屬性值

scroll:它是防止元素隨內容滾動但隨頁麵滾動的默認值。

fixed:使用此值，背景圖像不會隨元素移動，即使元素具有滾動機製。它會導致圖像被鎖定在一個地方，甚至文檔的其餘部分也會滾動。

local:使用這個值，如果元素有滾動機製，背景圖片會隨著元素的內容滾動。

initial:它將屬性設置為其默認值。

inherit:它從其父元素繼承屬性。

讓我們通過一些插圖來理解這個屬性。

示例

在此示例中，我們使用 background-attachment 屬性的滾動值，這是默認行為。所以當頁麵滾動時，背景也會隨之滾動。

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image: url("lion.png");
font-size:35px;
border:4px solid red;
color:white;
background-position:center;
background-color:green;	
background-repeat:no-repeat;
background-attachment:scroll;
}

</style>
</head>

<body>
<h1> background-attachment:scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>

</body>
</html>

輸出

示例 - 使用固定值

在此示例中，我們使用 background-attachment 屬性的固定值。該值固定了背景圖像，即使文檔的其餘部分滾動，圖像也不會移動。

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image: url("lion.png");
font-size:35px;
border:4px solid red;
color:white;
background-position:center;
background-color:green;	
background-repeat:no-repeat;
background-attachment:fixed;
}

</style>
</head>

<body>
<h1> background-attachment:fixed;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>

</body>
</html>

輸出

示例 - 使用本地值

在此示例中，我們使用 background-attachment 屬性的本地值。在這裏， background-image 將隨著元素內容的滾動而滾動。

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image: url("lion.png");
font-size:35px;
border:4px solid red;
color:white;
background-position:center;
background-color:green;	
background-repeat:no-repeat;
background-attachment:local;
}

</style>
</head>

<body>
<h1> background-attachment:local;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>

</body>
</html>

輸出

現在，讓我們看另一個示例，其中我們為元素使用多個背景圖像。

示例

在這裏，有兩個背景圖像我們正在應用 background-attachment 屬性。第一張圖片的附件設置為固定，而第二張圖片的附件設置為滾動。

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image: url("jtp.png"), url("forest.jpg");
height:500px;
border:4px solid red;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed, scroll;
}

</style>
</head>

<body>
<h1> background-attachment:scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
</div>
</body>
</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS background-attachment property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。