CSS兩個(gè)背景怎么弄？

在CSS中，我們可以使用background屬性來設(shè)置元素的背景，由于CSS的限制，我們只能為一個(gè)元素設(shè)置一個(gè)背景，如果我們想要為同一個(gè)元素設(shè)置兩個(gè)背景，應(yīng)該怎么做呢？

一種方法是使用background-image屬性，它允許我們?cè)O(shè)置多個(gè)背景圖像，這些圖像可以疊加在一起，形成復(fù)合背景。

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

在這個(gè)例子中，div元素有兩個(gè)背景圖像，***個(gè)圖像是image1.png，位置在頂部；第二個(gè)圖像是image2.png，位置在底部，這樣，我們就可以在同一個(gè)元素上設(shè)置兩個(gè)背景了。

另一種方法是使用偽元素，我們可以為一個(gè)元素創(chuàng)建一個(gè)偽元素，并為這個(gè)偽元素設(shè)置背景。

div {
  position: relative;
}
div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('image1.png') no-repeat;
}
div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('image2.png') no-repeat;
}

在這個(gè)例子中，div元素有兩個(gè)偽元素，分別設(shè)置了不同的背景圖像，這樣，我們就可以在同一個(gè)元素上設(shè)置兩個(gè)背景了，這種方法的好處是，我們可以為偽元素設(shè)置不同的樣式和位置，從而實(shí)現(xiàn)更豐富的背景效果。