如何在不同分辨率下使用background-image

小樊
102
2024-06-17 19:48:51

在不同分辨率下使用background-image可以通過(guò)使用CSS media queries來(lái)實(shí)現(xiàn)?？梢愿鶕?jù)不同的分辨率設(shè)置不同的背景圖片，并在對(duì)應(yīng)的分辨率下顯示相應(yīng)的背景圖片。

例如，可以使用以下代碼來(lái)在不同分辨率下設(shè)置不同的背景圖片：

/* 默認(rèn)背景圖片 */
body {
  background-image: url('default-background.jpg');
}

/* 在小屏幕設(shè)備下顯示不同的背景圖片 */
@media only screen and (max-width: 600px) {
  body {
    background-image: url('small-screen-background.jpg');
  }
}

/* 在大屏幕設(shè)備下顯示不同的背景圖片 */
@media only screen and (min-width: 1200px) {
  body {
    background-image: url('large-screen-background.jpg');
  }
}

通過(guò)使用media queries，可以根據(jù)不同的分辨率設(shè)置不同的背景圖片，使得在不同設(shè)備上顯示不同的內(nèi)容。

0 踩