CSS背景圖如何垂直顯示

在CSS中，我們可以使用background-position屬性來控制背景圖片的位置，如果想要讓背景圖片垂直顯示，可以將background-position屬性的值設(shè)置為top或bottom，分別表示圖片的頂部或底部與容器的頂部或底部對齊。

假設(shè)我們有一個(gè)div容器，其ID為myDiv，我們想要在其內(nèi)部垂直顯示一張背景圖片，可以如下操作：

#myDiv {
  background-image: url('path/to/my/image.png');
  background-position: top;
  height: 300px;
}

在上面的代碼中，background-image屬性用于指定背景圖片的路徑，background-position屬性用于控制圖片的位置，height屬性用于設(shè)置容器的高度，這樣，背景圖片就會從容器的頂部開始顯示，并且垂直向下延伸。

如果想要讓背景圖片在容器中垂直居中顯示，可以使用background-position: center;來設(shè)置圖片的中心點(diǎn)與容器的中心點(diǎn)對齊，還需要設(shè)置容器的高度和寬度，以確保圖片能夠完全顯示在容器內(nèi)部。

通過CSS的background-position屬性，我們可以輕松地控制背景圖片的位置，從而實(shí)現(xiàn)垂直顯示的效果。