CSS的background属性用于设置元素的背景。它可用于应用单个背景图像或多个背景图像，以及定义背景颜色、大小、位置、重复行为和其他相关属性。

background 是以下属性的简写:

概述

  • background 属性允许设置一层或多层背景，以逗号分隔。

  • 每一层背景可能出现零次或至少一次以下值:

    • <attachment>

    • <bg-image>

    • <position>

    • <bg-size>

    • <repeat-style>

  • 如果要添加 <bg-size>，则必须将其放在 <position> 之后，用"/"分隔。例如:"left/50%"。

  • <box> 的值可以包含零次、一次或两次。根据出现次数，设置以下值:

    • 一次: 设置background-origin 和background-clip 的值。

    • 两次: 第一次设置background-origin的值，第二次设置background-clip的值。

  • background-color 的值可以包含在指定为背景的最后一层中。

属性值

以下是后台简写属性可以具有的可能值:

  • <attachment>:指定背景，无论是固定的还是可滚动的。默认为滚动。

  • <box>:默认分别为 border-box 和 padding-box。

  • <background-color>:设置背景的颜色。默认为透明。

  • <bg-image>:设置一张或多张背景图像。默认为无。

  • <position>:设置背景的初始位置。默认值为 0% 0%。

  • <repeat-style>:控制背景中图像的重复。默认为重复。

  • <bg-size>:控制背景图像的大小。默认为自动。

语法

background = background-color | bg-image | bg-position / bg-size | repeat-style | attachment | box;

CSS background: 带图像和背景颜色

这里是使用简写属性background设置背景，其中指定图像和背景颜色:

<html>
<head>
<style>  
   body {
      background: url('/css/images/scenery2.jpg') center/40% 50% no-repeat fixed padding-box content-box lightblue;
   }
</style>
</head>
<body>
   <h2>Shorthand Background</h2>
</body>
</html>

CSS background: 图像重复

这里是使用简写属性background设置背景的示例，其中图像重复:

<html>
<head>
<style>  
   body {
      background: url('/css/images/scenery2.jpg') repeat fixed padding-box content-box lightblue;
   }
</style>
</head>
<body>
   <h2 style="color: white;">Shorthand Background: background repeated</h2>
</body>
</html>

CSS background: 带背景颜色的图像

这里是使用简写属性background 设置背景的示例，其中添加了两个图像和一个背景颜色:

<html>
<head>
<style>  
   body {
      background: url('/css/images/orange-flower.jpg') right bottom/30% 60% no-repeat, 
      url('/css/images/pink-flower.jpg') left top/30% 60% no-repeat lightgoldenrodyellow;
   }
</style>
</head>
<body>
   <h2 style="color: black; text-align: center;">Shorthand Background: two images</h2>
</body>
</html>

CSS background相关属性

所有与background相关的属性如下表所示:

属性描述
background背景相关属性的简写。
background-attachment指定背景相对于视口的位置，可以是固定的，也可以是可滚动。
background-clip控制背景图像延伸的距离元素的内边距或内容框。
background-color设置背景元素的颜色。
background-image设置一个或多个背景元素上的图像。
background-origin设置背景原点。
background-position设置背景的初始位置背景中的每个图像。
background-position-x设置背景中每个图像的初始水平位置。
background-position-y设置背景中每个图像的初始垂直位置。
background-repeat控制背景中图像的重复。
background-size控制背景图像的大小。
background-blend-mode确定元素的背景图像如何相互混合。