CSS背景（背景）

创建网页时，您经常需要向网页添加背景颜色和背景图像，以使网页更加美观并吸引访问者的注意力。 CSS 提供了一组属性用于设置 HTML 元素的背景效果：

背景颜色：设置元素的背景颜色。
background-image：设置元素的背景图像。
background-repeat：控制背景图像是否重复。
background-attachment：控制背景图像是否随窗口滚动。
背景位置：控制背景图像在元素内的位置。
背景大小：设置背景图像的大小。
background-origin：设置相对于背景图像应放置位置的背景位置属性。
background-clip：设置背景图片的显示区域。
背景：背景属性的缩写，允许您在一条语句中设置所有背景属性。

1.背景颜色

您可以使用background-color属性设置元素的背景颜色，该属性支持以下属性值：

价值	解释
颜色名称	使用特定颜色名称（例如红色）设置元素的背景颜色
十六进制数	使用十六进制代码设置元素的背景颜色（例如#ff0000）。
RGB_数字	要设置元素的背景颜色，请使用 rgb() 函数（例如，rgb(255,0,0)）。
透明的	默认情况下，背景色设置为透明，很少使用。但是，如果不希望某个元素有背景色，或者不希望用户的浏览器设置（例如开启夜间模式或护眼模式）影响设计，请使用透明来设置背景可以设置颜色。使颜色透明
继承	从父元素继承背景颜色设置

[示例] 使用background-color设置元素的背景颜色。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS 背景</title>
    <style>
    #bg {
        color: white;
        background-color: blue;
        margin: 20px;   /*外側マージンを20ピクセルに設定*/
        padding: 20px;  /*内側パディングを20ピクセルに設定*/
        border: 10px dotted yellow;  /*幅10ピクセルの黄色点線ボーダーを設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background-color プロパティ</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_501”对齐=“aligncenter”宽度=“1024”]

图：background-color属性演示[/caption]

正如您所看到的，background-color 属性允许您为元素设置纯色背景色，该背景色填充元素的内容、内边距和边框区域（也可以理解为边框）。（其中的所有区域），边界之外的区域（边距）没有影响。

有关 CSS 颜色的信息，请参阅 CSS 颜色部分。

2. 背景图片

background-image 用于设置元素的背景图像，默认情况下，浏览器从元素内容的左上角开始重复背景图像以填充整个元素区域，可以设置background-repeat 属性。用于控制背景图像是否重复以及如何重复。

background-image 属性的可选值为：

价值	解释
网址（’网址’）	图像的路径。您可以将 url() 视为一个函数。括号中的URL是图片的具体路径。
没有任何	默认不显示背景图片
继承	从父元素继承背景图像设置

[示例] 使用background-image属性将图像[]设置为元素的背景图像。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: red;
        background-image: url('./background-image.png');
        margin: 20px;   /*外側余白を20pxに設定*/
        padding: 20px;  /*内側余白を20pxに設定*/
        border: 10px dotted red;  /*幅10pxの赤い点線の枠線を設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background-image 属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_502”对齐=“aligncenter”宽度=“1024”] 图：背景图像属性演示

图：background-image属性演示[/caption]

背景图像与背景颜色具有相同的范围；它也填充元素的内容、填充和边框区域，并且不影响元素边框之外的区域（空白）。）。

3.背景重复

默认情况下，背景图像从元素内容的左上角开始（或者从元素填充区域的左上角开始，如果有填充），并水平和垂直重复背景图像以填充整个元素区域（元素（边距区域），可以使用background-repeat属性来设置是否或如何重复背景图像，该属性的可选值有：

价值	解释
重复	默认情况下，背景图像水平和垂直重复
重复-x	背景图像仅水平重复
重复y	背景图像仅垂直重复
不重复	背景图像仅出现一次并且不会在任何方向重复
继承	从父元素继承背景重复属性设置

[示例] 使用background-repeat 属性仅水平重复背景图像。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url('./bg-image.png');
        background-repeat: repeat-x; /*背景画像を繰り返す*/
        margin: 20px;   /*外側余白を20pxに設定*/
        padding: 20px;  /*内側余白を20pxに設定*/
        border: 10px dotted red;  /*10pxの赤い点線枠線を設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background-repeat 属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_503”对齐=“aligncenter”宽度=“1024”] 图：背景重复属性演示

图：background-repeat属性演示[/caption]

4.背景位置

background-position 属性用于设置背景图像的起始位置，该属性的可选值有：

价值	解释
左上方，左中心，左下角，右上角，右中心右下角，中心顶部，中心底部，底部中心	使用一些关键字指示背景图像的位置。如果只设置第一个关键字，则第二个关键字默认居中
x% y%	元素左上角到背景图像的距离，以百分比表示。 x% 为水平，y% 为垂直，左上角为 0% 0%，右下为 100% 如果只设置 100% 那么第一个值，那么另一个值是 50%，默认是 0% 0%
x 位置 y 位置	使用像素 (px) 或其他 CSS 单位指示背景图像与元素左上角之间的距离。 xpos为水平，ypos为垂直，左上角为0px 0px，右下角为0px。角点取决于元素的大小，可以混合使用百分比和单位格式。如果仅设置第一个值，则其他值将默认为 50%。

[示例] 使用background-position属性设置背景图片的位置。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url('./bg-image.png');
        background-repeat: no-repeat;
        background-position: 0% 50%;
        margin: 20px;   /*外側余白を20pxに設定*/
        padding: 20px;  /*内側余白を20pxに設定*/
        border: 10px dotted red;  /*10pxの赤い点線枠線を設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background-position プロパティ</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_504”对齐=“aligncenter”宽度=“1024”]

图：background-position属性演示[/caption]

5. 附背景

background-attachment 属性用于配置背景图片是固定在特定位置还是随页面滚动。该属性的可选值有：

价值	解释
滚动	默认情况下，背景图片随着页面元素的滚动而移动
固定的	背景图像保持固定，而页面的其余部分滚动
继承	从父元素继承背景附件属性设置

[示例] 使用background-attachment 属性将背景图像固定在屏幕顶部。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background-image: url('./bg-image.png');
        background-repeat: repeat-x;
        background-attachment: fixed;
    }
    </style>
</head>
<body>
    <p>background-position 属性</p>
    <p>background-position 属性</p>
    <p>background-position 属性</p>
    <p>background-position 属性</p>
    <p>background-position 属性</p>
    <p>background-position 属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_505”对齐=“aligncenter”宽度=“845”] 图：后台附件属性演示

图：background-attachment属性演示[/caption]

6. 背景尺寸

background-size 属性用于设置背景图像的大小，该属性的可选值有：

价值	解释
x 位置 y 位置	使用像素 (px) 或其他 CSS 单位设置背景图像的高度和宽度。 xpos 表示宽度，ypos 表示高度。如果仅设置第一个值，则第二个值设置为默认值自动（auto）。）
x% y%	使用百分比来表示背景图像与元素的宽度和高度的比例。 x% 表示宽度，y% 表示高度。如果只设置了第一个值，第二个值就是默认值auto
覆盖	确保保持背景图像的长宽比并使其足够大，以便背景图像可以完全覆盖放置元素的区域。显示的
包含	保持背景图像的长宽比并使其足够大，以便背景图像在放置元素的区域中完全可见。背景图像可能不会完全覆盖整个元素区域。

[示例] 使用background-size属性设置背景图片的大小，并将背景图片水平分布在元素区域中。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background-image: url('./bg-image.png');
        background-repeat: repeat-x;
        background-size: contain;
    }
    </style>
</head>
<body>
    <p>background-size 属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_506”对齐=“aligncenter”宽度=“1024”]

图：background-size属性演示[/caption]

7. 背景起源

background-origin 是 CSS3 中添加的新属性。使用background-position属性设置背景图片位置时，默认是根据元素左上角的位置计算的。还可以使用background-origin属性来设置background-position属性相对于背景图像的位置，background-origin属性的可选值有：

价值	解释
填充盒	相对于元素的填充区域定位背景图像
边框	相对于元素的边界区域定位背景图像
内容框	相对于元素的内容区域定位背景图像

[示例] 使用background-origin属性设置背景图像相对于元素边界区域的位置。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url('./bg-image.png');
        background-repeat: no-repeat;
        background-origin: border-box;
        background-position: 5px 5px;
        margin: 20px;   /*外側余白を20ピクセルに設定*/
        padding: 20px;  /*内側余白を20ピクセルに設定*/
        border: 10px dotted red;  /*赤い破線の太さが10ピクセルの外縁を設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background-origin 属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_507”对齐=“aligncenter”宽度=“1024”]

图：背景属性演示[/caption]

8. 背景剪辑

background-clip是CSS3中的一个新属性，可以让你设置背景图片的显示区域。 background-clip 属性的可选值为：

价值	阐明
边框	默认情况下，背景图像出现在元素边框上及其周围
填充盒	在元素的内边距之上和内显示背景图像
内容框	在元素内容区域显示背景图片

【示例】设置background-clip属性，仅在元素内容区域显示背景图片：

 <!DOCTYPE html> 
<html> 
<head> 
    <title>CSSのバックグラウンド</title> 
    <style> 
    #bg { 
        background-image: url('./bg-image.png'); 
        background-clip: content-box; 
        margin: 20px;   /*外側の余白を 20px に設定*/ 
        padding: 20px;  /*内側の余白を 20px に設定*/ 
        border: 10px dotted red;  /*10px 幅の赤い点線枠を設定*/ 
    } 
    </style> 
</head> 
<body> 
    <p id="bg">background-clipプロパティ</p> 
</body> 
</html>

执行结果如下图所示。

[标题id =“attachment_508”对齐=“aligncenter”宽度=“1024”]

图：background-clip属性演示[/caption]

背景是背景属性的缩写，它允许您在元素上设置特定的背景属性，也可以同时设置多个或全部背景属性。设置多个背景属性时没有固定的顺序，但建议按以下顺序：

背景颜色 || 背景图像 || 背景位置 [/背景大小] || 背景附件 || 背景剪辑

设置多个背景属性时，请记住以下几点：

用空格分隔每个属性。
如果同时设置background-position和background-size属性，则必须在两个属性之间使用斜杠/分隔符，并且遵循background-position属性在background-size属性之前的顺序。
如果同时设置background-origin和background-clip属性，则必须遵循background-origin属性在前、background-clip属性在后的顺序。如果background-origin和background-clip属性具有相同的值，则只能设置一个值。

【示例】通过background同时设置多个背景属性：

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        background: #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box;
        margin: 20px;   /*外部マージンを20ピクセルに設定*/
        padding: 20px;  /*内部パディングを20ピクセルに設定*/
        border: 10px dotted red;  /*幅10ピクセルの赤い破線ボーダーを設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_509”对齐=“aligncenter”宽度=“1024”]

图：背景属性演示[/caption]

background属性还支持设置多组属性值（上面的例子#ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box set ）使用逗号,将属性值分组。但需要注意的是，background-color属性不能设置多次，只能在最后一组属性值中设置。

如果多个属性集中的背景图片之间存在重叠，则前面设置的背景图片会覆盖后面的背景图片。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <title>CSSの背景</title>
    <style>
    body {
        background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box,
                    url("./css.png") 50px 30px/120px 120px no-repeat content-box,
                    url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a;
    }
    </style>
</head>
<body>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_510”对齐=“aligncenter”宽度=“1024”]

图：多个背景层叠效果[/caption]

JSON

创建网页时，您经常需要向网页添加背景颜色和背景图像，以使网页更加美观并吸引访问者的注意力。 CSS 提供了一组属性用于设置 HTML 元素的背景效果：

背景颜色：设置元素的背景颜色。
background-image：设置元素的背景图像。
background-repeat：控制背景图像是否重复。
background-attachment：控制背景图像是否随窗口滚动。
背景位置：控制背景图像在元素内的位置。
背景大小：设置背景图像的大小。
background-origin：设置相对于背景图像应放置位置的背景位置属性。
background-clip：设置背景图片的显示区域。
背景：背景属性的缩写，允许您在一条语句中设置所有背景属性。

1.背景颜色

您可以使用background-color属性设置元素的背景颜色，该属性支持以下属性值：

价值	解释
颜色名称	使用特定颜色名称（例如红色）设置元素的背景颜色
十六进制数	使用十六进制代码设置元素的背景颜色（例如#ff0000）。
RGB_数字	要设置元素的背景颜色，请使用 rgb() 函数（例如，rgb(255,0,0)）。
透明的	默认情况下，背景色设置为透明，很少使用。但是，如果不希望某个元素有背景色，或者不希望用户的浏览器设置（例如开启夜间模式或护眼模式）影响设计，请使用透明来设置背景可以设置颜色。使颜色透明
继承	从父元素继承背景颜色设置

[示例] 使用background-color设置元素的背景颜色。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS 背景</title>
    <style>
    #bg {
        color: white;
        background-color: blue;
        margin: 20px;   /*外側マージンを20ピクセルに設定*/
        padding: 20px;  /*内側パディングを20ピクセルに設定*/
        border: 10px dotted yellow;  /*幅10ピクセルの黄色点線ボーダーを設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background-color プロパティ</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_501”对齐=“aligncenter”宽度=“1024”]

图：background-color属性演示[/caption]

正如您所看到的，background-color 属性允许您为元素设置纯色背景色，该背景色填充元素的内容、内边距和边框区域（也可以理解为边框）。（其中的所有区域），边界之外的区域（边距）没有影响。

有关 CSS 颜色的信息，请参阅 CSS 颜色部分。

2. 背景图片

background-image 用于设置元素的背景图像，默认情况下，浏览器从元素内容的左上角开始重复背景图像以填充整个元素区域，可以设置background-repeat 属性。用于控制背景图像是否重复以及如何重复。

background-image 属性的可选值为：

价值	解释
网址（’网址’）	图像的路径。您可以将 url() 视为一个函数。括号中的URL是图片的具体路径。
没有任何	默认不显示背景图片
继承	从父元素继承背景图像设置

[示例] 使用background-image属性将图像[]设置为元素的背景图像。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: red;
        background-image: url('./background-image.png');
        margin: 20px;   /*外側余白を20pxに設定*/
        padding: 20px;  /*内側余白を20pxに設定*/
        border: 10px dotted red;  /*幅10pxの赤い点線の枠線を設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background-image 属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_502”对齐=“aligncenter”宽度=“1024”] 图：背景图像属性演示

图：background-image属性演示[/caption]

背景图像与背景颜色具有相同的范围；它也填充元素的内容、填充和边框区域，并且不影响元素边框之外的区域（空白）。）。

3.背景重复

默认情况下，背景图像从元素内容的左上角开始（或者从元素填充区域的左上角开始，如果有填充），并水平和垂直重复背景图像以填充整个元素区域（元素（边距区域），可以使用background-repeat属性来设置是否或如何重复背景图像，该属性的可选值有：

价值	解释
重复	默认情况下，背景图像水平和垂直重复
重复-x	背景图像仅水平重复
重复y	背景图像仅垂直重复
不重复	背景图像仅出现一次并且不会在任何方向重复
继承	从父元素继承背景重复属性设置

[示例] 使用background-repeat 属性仅水平重复背景图像。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url('./bg-image.png');
        background-repeat: repeat-x; /*背景画像を繰り返す*/
        margin: 20px;   /*外側余白を20pxに設定*/
        padding: 20px;  /*内側余白を20pxに設定*/
        border: 10px dotted red;  /*10pxの赤い点線枠線を設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background-repeat 属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_503”对齐=“aligncenter”宽度=“1024”] 图：背景重复属性演示

图：background-repeat属性演示[/caption]

4.背景位置

background-position 属性用于设置背景图像的起始位置，该属性的可选值有：

价值	解释
左上方，左中心，左下角，右上角，右中心右下角，中心顶部，中心底部，底部中心	使用一些关键字指示背景图像的位置。如果只设置第一个关键字，则第二个关键字默认居中
x% y%	元素左上角到背景图像的距离，以百分比表示。 x% 为水平，y% 为垂直，左上角为 0% 0%，右下为 100% 如果只设置 100% 那么第一个值，那么另一个值是 50%，默认是 0% 0%
x 位置 y 位置	使用像素 (px) 或其他 CSS 单位指示背景图像与元素左上角之间的距离。 xpos为水平，ypos为垂直，左上角为0px 0px，右下角为0px。角点取决于元素的大小，可以混合使用百分比和单位格式。如果仅设置第一个值，则其他值将默认为 50%。

[示例] 使用background-position属性设置背景图片的位置。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url('./bg-image.png');
        background-repeat: no-repeat;
        background-position: 0% 50%;
        margin: 20px;   /*外側余白を20pxに設定*/
        padding: 20px;  /*内側余白を20pxに設定*/
        border: 10px dotted red;  /*10pxの赤い点線枠線を設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background-position プロパティ</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_504”对齐=“aligncenter”宽度=“1024”]

图：background-position属性演示[/caption]

5. 附背景

background-attachment 属性用于配置背景图片是固定在特定位置还是随页面滚动。该属性的可选值有：

价值	解释
滚动	默认情况下，背景图片随着页面元素的滚动而移动
固定的	背景图像保持固定，而页面的其余部分滚动
继承	从父元素继承背景附件属性设置

[示例] 使用background-attachment 属性将背景图像固定在屏幕顶部。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background-image: url('./bg-image.png');
        background-repeat: repeat-x;
        background-attachment: fixed;
    }
    </style>
</head>
<body>
    <p>background-position 属性</p>
    <p>background-position 属性</p>
    <p>background-position 属性</p>
    <p>background-position 属性</p>
    <p>background-position 属性</p>
    <p>background-position 属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_505”对齐=“aligncenter”宽度=“845”] 图：后台附件属性演示

图：background-attachment属性演示[/caption]

6. 背景尺寸

background-size 属性用于设置背景图像的大小，该属性的可选值有：

价值	解释
x 位置 y 位置	使用像素 (px) 或其他 CSS 单位设置背景图像的高度和宽度。 xpos 表示宽度，ypos 表示高度。如果仅设置第一个值，则第二个值设置为默认值自动（auto）。）
x% y%	使用百分比来表示背景图像与元素的宽度和高度的比例。 x% 表示宽度，y% 表示高度。如果只设置了第一个值，第二个值就是默认值auto
覆盖	确保保持背景图像的长宽比并使其足够大，以便背景图像可以完全覆盖放置元素的区域。显示的
包含	保持背景图像的长宽比并使其足够大，以便背景图像在放置元素的区域中完全可见。背景图像可能不会完全覆盖整个元素区域。

[示例] 使用background-size属性设置背景图片的大小，并将背景图片水平分布在元素区域中。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background-image: url('./bg-image.png');
        background-repeat: repeat-x;
        background-size: contain;
    }
    </style>
</head>
<body>
    <p>background-size 属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_506”对齐=“aligncenter”宽度=“1024”]

图：background-size属性演示[/caption]

7. 背景起源

background-origin 是 CSS3 中添加的新属性。使用background-position属性设置背景图片位置时，默认是根据元素左上角的位置计算的。还可以使用background-origin属性来设置background-position属性相对于背景图像的位置，background-origin属性的可选值有：

价值	解释
填充盒	相对于元素的填充区域定位背景图像
边框	相对于元素的边界区域定位背景图像
内容框	相对于元素的内容区域定位背景图像

[示例] 使用background-origin属性设置背景图像相对于元素边界区域的位置。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url('./bg-image.png');
        background-repeat: no-repeat;
        background-origin: border-box;
        background-position: 5px 5px;
        margin: 20px;   /*外側余白を20ピクセルに設定*/
        padding: 20px;  /*内側余白を20ピクセルに設定*/
        border: 10px dotted red;  /*赤い破線の太さが10ピクセルの外縁を設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background-origin 属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_507”对齐=“aligncenter”宽度=“1024”]

图：背景属性演示[/caption]

8. 背景剪辑

background-clip是CSS3中的一个新属性，可以让你设置背景图片的显示区域。 background-clip 属性的可选值为：

价值	阐明
边框	默认情况下，背景图像出现在元素边框上及其周围
填充盒	在元素的内边距之上和内显示背景图像
内容框	在元素内容区域显示背景图片

【示例】设置background-clip属性，仅在元素内容区域显示背景图片：

 <!DOCTYPE html> 
<html> 
<head> 
    <title>CSSのバックグラウンド</title> 
    <style> 
    #bg { 
        background-image: url('./bg-image.png'); 
        background-clip: content-box; 
        margin: 20px;   /*外側の余白を 20px に設定*/ 
        padding: 20px;  /*内側の余白を 20px に設定*/ 
        border: 10px dotted red;  /*10px 幅の赤い点線枠を設定*/ 
    } 
    </style> 
</head> 
<body> 
    <p id="bg">background-clipプロパティ</p> 
</body> 
</html>

执行结果如下图所示。

[标题id =“attachment_508”对齐=“aligncenter”宽度=“1024”]

图：background-clip属性演示[/caption]

背景是背景属性的缩写，它允许您在元素上设置特定的背景属性，也可以同时设置多个或全部背景属性。设置多个背景属性时没有固定的顺序，但建议按以下顺序：

背景颜色 || 背景图像 || 背景位置 [/背景大小] || 背景附件 || 背景剪辑

设置多个背景属性时，请记住以下几点：

用空格分隔每个属性。
如果同时设置background-position和background-size属性，则必须在两个属性之间使用斜杠/分隔符，并且遵循background-position属性在background-size属性之前的顺序。
如果同时设置background-origin和background-clip属性，则必须遵循background-origin属性在前、background-clip属性在后的顺序。如果background-origin和background-clip属性具有相同的值，则只能设置一个值。

【示例】通过background同时设置多个背景属性：

 <!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        background: #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box;
        margin: 20px;   /*外部マージンを20ピクセルに設定*/
        padding: 20px;  /*内部パディングを20ピクセルに設定*/
        border: 10px dotted red;  /*幅10ピクセルの赤い破線ボーダーを設定*/
    }
    </style>
</head>
<body>
    <p id="bg">background属性</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_509”对齐=“aligncenter”宽度=“1024”]

图：背景属性演示[/caption]

background属性还支持设置多组属性值（上面的例子#ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box set ）使用逗号,将属性值分组。但需要注意的是，background-color属性不能设置多次，只能在最后一组属性值中设置。

如果多个属性集中的背景图片之间存在重叠，则前面设置的背景图片会覆盖后面的背景图片。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <title>CSSの背景</title>
    <style>
    body {
        background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box,
                    url("./css.png") 50px 30px/120px 120px no-repeat content-box,
                    url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a;
    }
    </style>
</head>
<body>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_510”对齐=“aligncenter”宽度=“1024”]

图：多个背景层叠效果[/caption]

JSON