CSS 背景简写

背景简写属性是CSS中一个非常实用的属性，它允许我们在一个声明中设置所有背景相关的属性，包括背景颜色、背景图片、背景重复、背景位置、背景大小和背景附着等。

基本语法

background简写属性的基本语法如下：

css

元素选择器 {
  background: [背景颜色] [背景图片] [背景重复] [背景位置]/[背景大小] [背景附着];
}

注意：

背景大小必须紧跟在背景位置之后，用斜杠(/)分隔
各值之间用空格分隔
可以省略某些值，未指定的值将使用默认值

属性顺序

虽然background简写属性允许我们以任意顺序指定各个背景值，但通常建议使用以下顺序：

background-color
background-image
background-repeat
background-attachment
background-position/background-size

简写示例

1. 基本用法

css

.element {
  background: red url('images/background.jpg') no-repeat center center/cover fixed;
}

这相当于：

css

.element {
  background-color: red;
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

2. 省略部分值

可以省略某些值，未指定的值将使用默认值：

css

.element {
  background: #f5f5f5 url('images/pattern.png') repeat;
}

这相当于：

css

.element {
  background-color: #f5f5f5;
  background-image: url('images/pattern.png');
  background-repeat: repeat;
  background-position: 0 0; /* 默认值 */
  background-size: auto; /* 默认值 */
  background-attachment: scroll; /* 默认值 */
}

3. 只设置背景颜色

css

.element {
  background: blue;
}

这相当于：

css

.element {
  background-color: blue;
  background-image: none; /* 默认值 */
  background-repeat: repeat; /* 默认值 */
  background-position: 0 0; /* 默认值 */
  background-size: auto; /* 默认值 */
  background-attachment: scroll; /* 默认值 */
}

4. 只设置背景图片和位置

css

.element {
  background: url('images/logo.png') 50px 20px;
}

这相当于：

css

.element {
  background-color: transparent; /* 默认值 */
  background-image: url('images/logo.png');
  background-repeat: repeat; /* 默认值 */
  background-position: 50px 20px;
  background-size: auto; /* 默认值 */
  background-attachment: scroll; /* 默认值 */
}

多背景图片的简写

background简写属性也支持多背景图片，使用逗号分隔多个背景声明：

css

.element {
  background: 
    url('images/image1.png') no-repeat left top/100px 100px,
    url('images/image2.png') repeat center center/50% auto,
    #f5f5f5;
}

这相当于：

css

.element {
  background-image: 
    url('images/image1.png'),
    url('images/image2.png');
  background-repeat: 
    no-repeat,
    repeat;
  background-position: 
    left top,
    center center;
  background-size: 
    100px 100px,
    50% auto;
  background-attachment: 
    scroll, /* 默认值 */
    scroll; /* 默认值 */
  background-color: #f5f5f5;
}

注意：背景颜色只能在最后一个背景声明中指定，因为整个元素只有一个背景颜色。

应用场景

1. 简化代码

使用background简写属性可以大幅简化CSS代码，提高可读性和维护性：

css

/* 不使用简写 */
.hero {
  background-color: #000;
  background-image: url('images/hero-bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

/* 使用简写 */
.hero {
  background: #000 url('images/hero-bg.jpg') no-repeat center center/cover fixed;
}

2. 创建渐变背景

background简写属性也支持CSS渐变：

css

.element {
  background: linear-gradient(to right, red, blue);
}

3. 快速重置背景

使用background简写属性可以快速重置元素的所有背景属性：

css

.element {
  background: none; /* 重置所有背景属性 */
}

注意事项

浏览器兼容性：background简写属性在所有现代浏览器中都得到很好的支持，但background-size部分在旧版本浏览器中可能需要使用浏览器前缀。
背景大小的位置：在background简写属性中，background-size必须紧跟在background-position之后，并用斜杠(/)分隔。
默认值：未指定的背景属性将使用默认值，而不是继承父元素的值。
多背景图片：当使用多背景图片时，背景颜色只能在最后一个背景声明中指定。

浏览器兼容性

浏览器	支持情况
Chrome	完全支持
Firefox	完全支持
Safari	完全支持
Edge	完全支持
IE	IE6及以上支持，IE9及以上支持background-size部分

总结

background简写属性是CSS中一个非常实用的属性，它允许我们在一个声明中设置所有背景相关的属性，包括背景颜色、背景图片、背景重复、背景位置、背景大小和背景附着等。合理使用background简写属性可以简化CSS代码，提高可读性和维护性，但需要注意属性的顺序和浏览器兼容性。