覆盖 CSS 背景图片 - CSS

在使用 CSS 可以很容易地设置页面背景图片，但有时需要在某个元素上覆盖另一张背景图片。这时可以使用 CSS 属性 background-image 来设置多张背景图片，并使用 background-position 和 background-size 属性来定位和缩放图片。

以下示例将演示如何在 div 元素上覆盖另一张背景图片：

div {
  background-image: url('first-bg-image.jpg'), url('second-bg-image.jpg');
  background-position: center top, left top;
  background-size: auto, cover;
}

这里使用了 background-image 属性来设置两张背景图片，使用 , 分隔。第一张背景图片会被放置在顶部居中位置，第二张背景图片会被放置在左上角。使用 background-size 属性中的 cover 值可以保留图片的比例，并尽可能铺满元素的宽高。如果不想缩放图片，则可以将 background-size 属性设置为 auto。

以上为覆盖 CSS 背景图片的基本用法，通过多次使用 background-image 属性可以设置更多背景图片。在实际开发中，可以根据需求进行灵活运用。

参考链接：

• CSS 多背景图片技巧
• background-position
• background-size