CSS中如何設(shè)置兩個(gè)背景圖片并使其位于前面

在CSS中，我們可以使用background-image屬性來(lái)設(shè)置多個(gè)背景圖片，要使兩個(gè)背景圖片都位于前面，我們可以將它們的position屬性都設(shè)置為top或left。

以下是一個(gè)示例，展示如何設(shè)置兩個(gè)背景圖片并使其位于前面：

div {
  background-image: url('image1.png'), url('image2.png');
  background-position: top, left;
}

在這個(gè)示例中，image1.png和image2.png是兩個(gè)背景圖片的文件路徑。background-position: top, left;表示***個(gè)背景圖片位于元素的上方，第二個(gè)背景圖片位于元素的左側(cè)。

如果你想讓兩個(gè)背景圖片都位于元素的中心，你可以將background-position屬性設(shè)置為center, center：

div {
  background-image: url('image1.png'), url('image2.png');
  background-position: center, center;
}

這樣，兩個(gè)背景圖片都會(huì)位于元素的中心位置。

當(dāng)設(shè)置多個(gè)背景圖片時(shí)，它們的排列順序是從左到右，從上到下，在示例中，image1.png會(huì)位于image2.png的上面，如果你想要改變這個(gè)順序，你可以調(diào)整圖片的位置參數(shù)。