CSS圖片疊加背景的方法

在CSS中，可以使用background-image屬性來設(shè)置元素的背景圖片，如果想要實(shí)現(xiàn)圖片的疊加效果，可以通過設(shè)置多個(gè)background-image來實(shí)現(xiàn)，每個(gè)background-image可以指定一個(gè)圖片路徑，并且可以設(shè)置圖片的重復(fù)方式、位置等屬性。

以下代碼可以實(shí)現(xiàn)將兩個(gè)圖片疊加在一起：

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

在這個(gè)例子中，div元素的背景圖片由兩個(gè)圖片疊加而成，***個(gè)圖片路徑為image1.png，第二個(gè)圖片路徑為image2.png，兩個(gè)圖片的位置都設(shè)置為center，重復(fù)方式都設(shè)置為no-repeat。

需要注意的是，如果兩個(gè)圖片的大小不同，那么可能會(huì)出現(xiàn)圖片拉伸或者填充空白的情況，為了避免這種情況的發(fā)生，可以使用background-size屬性來設(shè)置圖片的大小，以下代碼可以將第二個(gè)圖片的大小設(shè)置為與***個(gè)圖片相同：

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

在這個(gè)例子中，div元素的背景圖片由兩個(gè)圖片疊加而成，***個(gè)圖片路徑為image1.png，第二個(gè)圖片路徑為image2.png，兩個(gè)圖片的位置都設(shè)置為center，重復(fù)方式都設(shè)置為no-repeat，使用background-size: cover, cover;將第二個(gè)圖片的大小設(shè)置為與***個(gè)圖片相同，避免出現(xiàn)圖片拉伸或者填充空白的情況。