CSS background背景属性详解

CSS中的background属性是一个简写属性，用于在一个声明中设置所有背景相关的属性。这些属性包括：

1. background-color：设置元素的背景颜色。
2. background-image：设置元素的背景图片。
3. background-repeat：控制背景图片是否及如何重复。
4. background-attachment：决定背景图片是否固定或随页面其他部分滚动。
5. background-position：控制背景图片的位置。
6. background-size：控制背景图片的大小。
7. background-origin：指定背景图像的定位区域

这些属性可以单独设置，也可以在background属性中以简写形式一次性设置。例如：

body {
    background: #ff0000 url('i/eg_bg_03.gif') no-repeat fixed center;
}

在上面的例子中，背景颜色被设置为红色（#ff0000），背景图片是i/eg_bg_03.gif，图片不重复，固定在浏览器窗口中不随页面滚动，位置居中。

1、background-color

background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

属性值

值	描述
color	指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent	指定背景颜色应该是透明的。这是默认
inherit	指定背景颜色，应该从父元素继承

实例：设置不同元素的背景色

div {
    background-color:yellow;
}
div {
    background-color:#00ff00;
}
div {
    background-color:rgb(255,0,255);
}

2、background-image

background-image 属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替

属性值：

值	说明
url('URL')	图像的URL
none	无图像背景会显示。这是默认
linear-gradient()	创建一个线性渐变的 "图像"(从上到下)
radial-gradient()	用径向渐变创建 "图像"。 (center to edges)
repeating-linear-gradient()	创建重复的线性渐变 "图像"。
repeating-radial-gradient()	创建重复的径向渐变 "图像"
inherit	指定背景图像应该从父元素继承

实例：

div
{
    background-image:url('paper.gif');
    background-color:#cccccc;
}

3、background-repeat

设置如何平铺对象的 background-image 属性。默认情况下，重复background-image的垂直和水平方向。

提示: background-position 属性设置背景图像位置。如果指定的位置是没有任何背景，图像总是放在元素的左上角。

属性值：

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image 不会重复
inherit	指定 background-repeat 属性设置应该从父元素继承

实例：

/* 默认情况下,在垂直和水平方向重复背景图像。*/
div {
    background-image:url('paper.gif');
}

/* repeat-x 设置只有水平方向重复 background-image。*/
div {
    background-image:url('paper.gif');
    background-repeat:repeat-x;
}

/* no-repeat 设置显示一个背景图片没有重复只有一次。*/
div {
    background-image:url('paper.gif');
    background-repeat:no-repeat;
}

4、background-attachment

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

属性值：

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。 阅读关于 initial 内容
inherit	指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容

实例：

div
{
    background-image:url('https://static.jyshare.com/libs/images/mix/smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

5、background-position

background-position属性设置背景图像的起始位置。

注意：对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）".

属性值：

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

实例：

div { 
	background-image:url('smiley.gif');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center; 
}

6、background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

语法：

background-size: length|percentage|cover|contain;

实例：

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于 background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

7、background-origin

background-Origin属性指定background-position属性应该是相对位置。

注意：如果背景图像background-attachment是"固定"，这个属性没有任何效果。

语法：

background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

实例：

div {
	background-image:url('smiley.gif');
	background-repeat:no-repeat;
	background-position:left;
	background-origin:content-box;
}