CSS background 属性是一个速记属性，用于一次性设置多个背景属性。可以一次设置背景颜色、图像、位置、大小、重复、原点、剪辑和附件等属性。此属性用于设置元素外观的样式。
语法
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;
属性值
| 值 | 描述 |
|---|---|
| background-color | 指定要使用的背景颜色。 |
| background-image | 指定要使用的一个或多个背景图像。 |
| background-position | 指定了背景图像的位置。 |
| background-size | 指定背景图像的大小。 |
| background-repeat | 指定了如何重复背景图像。 |
| background-origin | 指定了背景图像的定位区域。 |
| background-clip | 指定了背景图像的绘制区域。 |
| background-attachment | 指定背景图像的滚动类型。 |
| initial | 将该属性设置为其默认值。 |
| inherit | 将继承父元素的属性。 |
CSS Background 属性的示例
下面列出的示例说明了 background 属性如何与其各个组件一起工作。
设置背景颜色
background 属性的 background-color 组件设置元素的背景颜色。在以下示例中，background-color 属性用于将 div 标签的背景颜色设置为红色。
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: red;
padding: 20px;
}
</style>
</head>
<body>
<h2>CSS background property</h2>
<div>
<p> This is some text.</p>
</div>
</body>
</html>
设置背景图片
background 属性的 background-image 组件设置元素的背景图像。在以下示例中，background-image 属性用于将背景图像设置为花朵。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 200px;
background-image: url('/css/images/border.png');
}
</style>
</head>
<body>
<h2>CSS background property</h2>
</body>
</html>
设置背景位置
background 属性的 background-position 组件设置元素的背景位置。在以下示例中，background-position 属性用于将背景位置设置为中心。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
height: 200px;
border: 8px solid black;
padding: 25px;
background-position: center;
background-image: url("/css/images/orange-flower.jpg");
}
</style>
</head>
<body>
<h2>The background-position Property</h2>
<p>Center Position</p>
<div id="box">
</div>
</body>
设置背景大小
background 属性的 background-size 组件设置元素的背景大小。在以下示例中，background-size 属性用于将背景大小设置为封面。这将使图像完全适合整个宽度。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/css/images/orange-flower.jpg");
height:400px;
background-size: cover;
color:white;
}
</style>
</head>
<body>
<h2>CSS background property</h2>
</body>
</html>
设置背景重复
background 属性的背景重复分量决定了背景图像的重复。在以下示例中，使用了 background-repeat 属性，并为其指定了 repeat-y 值。图像沿十字轴重复。
<!DOCTYPE html>
<html>
<head>
<style>
.first {
padding: 30%;
background-repeat: repeat-y;
background-image: url("/css/images/logo.png");
}
</style>
</head>
<body>
<h2>CSS background property</h2>
<p> Repeat along Y direction.</p>
<div class="first">
</div>
</body>
</html>
设置背景原点
background 属性的 background-origin 组件决定了背景的原点，即图像必须开始的起点。在以下示例中，已使用 background-repeat 属性，并将其设置为 content box。图像从内容框的边缘开始。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Origin Example</title>
<style>
.box {
width: 200px;
height: 200px;
background: url('/css/images/white-flower.jpg');
background-origin: content-box;
padding:20px;
border: 10px dashed red;
}
</style>
</head>
<body>
<h2>CSS background property</h2>
<div class="box"></div>
</body>
</html>
设置背景剪辑
background 属性的 background-clip 组件决定了背景图像的痛苦区域。在以下示例中，background-clip 属性已与内容框值一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background: url('/css/images/white-flower.jpg');
background-clip: content-box;
padding: 20px;
border: 10px dashed grey;
}
</style>
</head>
<body>
<h2>CSS background property</h2>
<div class="box"></div>
</body>
</html>
设置背景附件
background 属性的 background-attachment 组件决定了背景图像上的滚动类型。在以下示例中，background-attachment 属性已与固定值一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 400px;
background-image: url('/css/images/orange-flower.jpg');
background-size:cover;
background-attachment: fixed;
color: white;
}
</style>
</head>
<body>
<h2>CSS background property</h2>
<p>This is a sample text. The image here is fixed.</p>
</body>
</html>
支持的浏览器
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
