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

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

提問人：劉團圓發(fā)布時間：2020-11-18

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

    ?scroll：默認值。背景圖像會隨著頁面其余部分的滾動而移動。

    ?fixed:當頁面的其余部分滾動時，背景圖像不會移動。

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

    下面通過兩個案例來了解background-attachment屬性。

    【例題】背景圖像滾動

    代碼如下：

<!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

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


    【例題】背景圖像不滾動

    代碼如下：

<!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

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

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

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