在 CSS 中，您可以为一个元素使用多个背景图像。第一个背景应分层在顶部，最后一个背景应分层在后面。只有最后一个背景可以有背景颜色。

语法

.multibackgrounds {
   background:
      background1,
      background2,
      /* …, */ backgroundN;
}

您可以使用速记和单独的背景属性，不包括背景颜色。

以下背景属性可以作为列表提供，每个背景一个:background、background-attachment，background-clip，background-image，background-origin，background-position，background-repeat，background-size。

CSS 多个背景: 使用background-image 属性

以下示例演示使用background-image 属性添加两个背景图像，其中第一个图像堆叠在顶部，第二个图像堆叠在其后面 -

<html>
<head>
<style>
   .multibackgrounds {
      background-image: url(/css/images/logo.png), url(/css/images/see.jpg);
      background-position: left top, right top;
      background-repeat: no-repeat, repeat;
      padding: 70px;
   }
</style>
</head>
<body>
   <div class="multibackgrounds">
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
   </div>
</body>
</html>

CSS 多个背景: 使用 background-size 属性

以下示例演示如何使用 background-size 属性使用多个不同大小的背景图像。第一个图像的大小为 150px，第二个图像的大小为 300px -

<html>
<head>
<style>
   .multibackgrounds{
      background-image: url(/css/images/logo.png), url(/css/images/see.jpg);
      background-position: left top, right top;
      background-repeat: no-repeat, repeat;
      padding: 70px;
   }
   .multibackgrounds-size {
      background-image: url(/css/images/logo.png), url(/css/images/see.jpg);
      background-position: left top, right top;
      background-repeat: no-repeat, repeat;
      background-size: 150px, 300px;
      padding: 70px;
   }
</style>
</head>
<body>
   <h3>无尺寸</h3>
   <div class="multibackgrounds">
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
   </div><br>
   <h3>有尺寸</h3>
   <div class="multibackgrounds-size">
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
   </div>
</body>
</html>

CSS 多个背景: 使用背景属性

以下示例演示使用速记属性添加三个背景图像背景 -

<html>
<head>
<style>
   .multibackgrounds-size {
      background: url(/css/images/logo.png),  url(/css/images/pink-flower.jpg), url(/css/images/see.jpg);
      background-position: left top, center, right top;
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: 150px, 100px, 550px;
      padding: 70px;
      color: yellow;
   }
</style>
</head>
<body>
   <div class="multibackgrounds-size">
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
   </div>
</body>
</html>

CSS 多个背景: 全尺寸图像

以下示例演示全尺寸背景图像，使用 background-size: cover 属性设置 -

<html>
<head>
<style> 
   html { 
      background: url(/css/images/red-flower.jpg) no-repeat center fixed; 
      background-size: cover;
      color: yellow; 
   }
</style>
</head>
<body>
   <h1>红色花朵图像</h1>
   <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 
</p>
</body>
</html>

CSS 多个背景: 英雄图像

以下示例演示了英雄图像的设置，指的是在 <div> 上使用不同 background 属性的带有文本的大图像 -

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/see.jpg) no-repeat center; 
      background-size: cover;
      height: 300px;
      position: relative;
   }
   .background-text {
      text-align: center;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: red;
   }
   button {
         background-color: yellow;
         padding: 10px;
   }
</style>
</head>
<body>
   <div class="background-img">
      <div class="background-text">
         <h1>See Image</h1>
            <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
         <button>Click Me</button>
      </div>
   </div>
</body>
</html>

CSS 多个背景 - 使用 background-origin 属性

以下示例演示如何使用 background-origin 属性 -

<html>
<head>
<style>
   div {
      width: 200px;
      height: 150px;
      border: 7px solid blue;
      padding: 30px;
      background: url(/css/images/pink-flower.jpg);
      background-repeat: no-repeat;
      margin: 10px;
   }
   P {
      color: yellow;
   }
   h3 {
      color: red;
   }
   .box1 {
      background-origin: padding-box;
   }
   .box2 {
      background-origin: border-box;
   }
   .box3 {
      background-origin: content-box;
   }
</style>
</head>
<body>
   <div class="box1">
      <h3>background-origin: padding-box</h3>
      <p>背景图像相对于内边距框定位。</p>
   </div>
   <div class="box2">
      <h3>background-origin: border-box</h3>
      <p>背景图像相对于边框框定位。</p>
   </div>
   <div class="box3">
      <h3>background-origin: content-box</h3>
      <p>背景图像相对于内容框定位。</p>
   </div>
</body>
</html>

CSS 多个背景: 使用 background-clip 属性

下面的示例演示了如何使用 background-clip 属性来在框中显示背景图像 -

<html>
<head>
<style>  
   p {
      width: 200px;
      height: 150px;
      border: 8px solid blue;
      margin: 10px;
      padding: 30px;
      color: yellow;
      background: url(/css/images/pink-flower.jpg);
   }
   .box1 {
      background-clip: border-box;
   }
   .box2 {
      background-clip: padding-box;
   }
   .box3 {
      background-clip: content-box;
   }
</style>
</head>
<body>
   <p class="box1">背景图像应用于整个元素。</p>
  <p class="box2">背景图像应用于填充区域。</p>
  <p class="box3">背景图像仅应用于内容区域。</p>
</body>
</html>

CSS 多个背景: 相关属性

所有相关属性背景如下表所示:

属性说明
background背景相关属性的简写。
background-attachment指定背景相对于视口的位置，可以是固定的，也可以是可滚动的。
background-clip控制背景图像超出元素内边距或内容框的距离。
background-image设置一张或多张背景图片）在元素上。
background-origin设置背景的原点。
background-position设置背景中每个图像的初始位置。
background-repeat控制背景中图像的重复。
background-size控制背景图像的大小。