CSS在背景圖中定位的方法

在CSS中，我們可以使用背景圖定位屬性來(lái)設(shè)置背景圖片的位置，這些屬性包括：

1、background-position：這個(gè)屬性用于設(shè)置背景圖片的水平（X軸）和垂直（Y軸）位置，你可以使用像素、百分比或者關(guān)鍵詞（如top、right、bottom、left）來(lái)設(shè)置位置。

2、background-repeat：這個(gè)屬性用于設(shè)置背景圖片的重復(fù)方式，你可以選擇讓圖片重復(fù)（repeat）、只在水平方向重復(fù)（repeat-x）、只在垂直方向重復(fù)（repeat-y），或者完全不重復(fù)（no-repeat）。

3、background-size：這個(gè)屬性用于設(shè)置背景圖片的大小，你可以使用像素、百分比或者關(guān)鍵詞（如contain和cover）來(lái)設(shè)置大小。

下面是一個(gè)例子，展示如何使用這些屬性來(lái)定位背景圖片：

body {
  background-image: url('example.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

在這個(gè)例子中，背景圖片會(huì)被定位在頁(yè)面的中心，不會(huì)重復(fù)，并且會(huì)被縮放以覆蓋整個(gè)頁(yè)面。

示例

假設(shè)你有一個(gè)圖片文件example.jpg，你想要將它設(shè)置為背景圖片，并且將其定位在頁(yè)面的右下角，你可以使用以下CSS代碼來(lái)實(shí)現(xiàn)：

body {
  background-image: url('example.jpg');
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

響應(yīng)式設(shè)計(jì)

在響應(yīng)式設(shè)計(jì)中，你可能希望背景圖片在不同屏幕尺寸下有不同的顯示效果，你可以使用媒體查詢（Media Queries）來(lái)實(shí)現(xiàn)這一點(diǎn)。

body {
  background-image: url('example.jpg');
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 600px) {
  body {
    background-image: url('example_mobile.jpg');
    background-position: center center;
    background-size: cover;
  }
}

在這個(gè)例子中，當(dāng)屏幕寬度小于或等于600px時(shí)，背景圖片會(huì)切換到example_mobile.jpg，并且會(huì)被定位在頁(yè)面的中心，覆蓋整個(gè)頁(yè)面。