CSS中給背景定位的方式有兩種,一種是通過background-position屬性,另一種是通過background-attachment屬性。
background-position: x-axis y-axis;
其中,x-axis和y-axis可以是長度值、百分比、left、center、right、top、bottom以及關鍵字none。這個屬性用于設置背景圖像的位置,x-axis表示水平方向,y-axis表示垂直方向。如果僅提供一個值,則第二個值默認為50%。
background-attachment: scroll|fixed|local;
這個屬性用于設置背景圖像是否固定或隨著頁面滾動一起移動。如果設置為scroll,則背景圖像會隨頁面滾動而移動;如果設置為fixed,則背景圖像會固定在窗口中不動;如果設置為local,則背景圖像會隨元素內容滾動而移動。
下面是一個例子,演示如何通過background-position設置背景圖像。
div { background-image: url("background.jpg"); background-repeat: no-repeat; background-position: center top; }
這個例子將一個名為background.jpg的背景圖像設置為div元素的背景,然后通過background-repeat屬性設置不重復,最后通過background-position屬性將圖像放置在div元素頂部的中央。