位置：首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > CSS > 問(wèn)題詳情

CSS 設(shè)置背景固定/滾動(dòng)

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-18

    background-attachment屬性設(shè)置背景圖像是否固走或者隨著頁(yè)面的其余部分滾動(dòng)。它的值可以是以下幾種：

    ?scroll：默認(rèn)值。背景圖像會(huì)隨著頁(yè)面其余部分的滾動(dòng)而移動(dòng)。

    ?fixed:當(dāng)頁(yè)面的其余部分滾動(dòng)時(shí)，背景圖像不會(huì)移動(dòng)。

    ?inherit：規(guī)定應(yīng)該從父元素繼承background-attachment屬性的設(shè)置。

    下面通過(guò)兩個(gè)案例來(lái)了解background-attachment屬性。

    【例題】背景圖像滾動(dòng)

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body{

background-image: url(img/0.1.jpg);

background-repeat: no-repeat;

height: 2000px;

}

</style>

</head>

<body>

</body>

</html>

image.png

    代碼運(yùn)行結(jié)果如圖所示。從代碼運(yùn)行結(jié)果中可以看出，在滾動(dòng)頁(yè)面時(shí)，背景圖片也明顯地移動(dòng)了。


    【例題】背景圖像不滾動(dòng)

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body{

background-image: url(img/0.1.jpg);

background-repeat: no-repeat;

height:2000px;

background-attachment: fixed;

}

</style>

</head>

<body>

</body>

</html>

image.png

    從代碼運(yùn)行結(jié)果可以看出，瀏覽器右邊的滾動(dòng)條已經(jīng)被拉到頁(yè)面的中間，但是body元素的背景圖像并沒(méi)有隨著頁(yè)面的滾動(dòng)而移動(dòng)。這就是background-attachment: fixed屬性的作用。

繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部