【CSS】background各属性一览汇总

前言：

某天上班打开未关机电脑，发现电脑自动打补丁，谷歌浏览器也更新了，但打开项目后发现，设置的背景图竟然未铺满整个div box。原本设置：

	{
		background: url('../../xxx.png') no-repeat 100% 100%;
	}

必须设置：

	{
		background: url('../../xxx.png') no-repeat 100%/cover;
	}

这时才能显示为铺满效果。
经过尝试发现，我电脑更新后的谷歌浏览器，按照背景图比例显示图像，未进行拉伸，必须设置background-size: cover来拉伸图片。而其他电脑同版本谷歌浏览器及题主电脑其他浏览器均无该现象，也是诡异！！！

由此，引发了对background各属性的详细情况的查询与巩固，并再次记录

1. background属性简写

background是CSS简写属性，包含color, image, origin 与 size, repeat方式等等。

可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。

background的语法

background简写时，可有一个或多个值，且可以按任意顺序放置：

• <bg-attachment>参见 background-attachment
• <box> 参见 background-clip 和 background-origin
• <bg-color>参见 background-color
• <bg-image>参见 background-image
• <position>参见 background-position
• <repeat-style>参见 background-repeat
• <bg-size> 参见 background-size

基础顺序：
background: <bg-color> <bg-image> <position/bg-size> <bg-repeat> <box: bg-origin|bg-clip> <bg-attachment> <initial|inherit>;

示例：

/* 使用 <background-color> */
background: green;

/* 使用 <bg-image> 和 <repeat-style> */
background: url("test.jpg") repeat-y;

/* 使用 <box> 和 <background-color> */
background: border-box red;

/* 将背景设为一张居中放大的图片 */
background: no-repeat center/80% url("../img/image.png");

2. background-XXX属性

2.1 background-attachment

决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的），如果元素本身滚动，背景跟随滚动。
fixed	背景图片不会随着页面的滚动而滚动。背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动.
local	背景图片会随着元素内容的滚动而滚动。背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

2.2 background-clip 和 background-origin

• background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

默认值: border-box

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

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框，但是在边框下层）
padding-box	背景绘制在内边距（padding）外沿方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。
text	背景被裁剪成文字的前景色

• background-origin属性指定background-position属性应该是相对位置。
  background-origin 规定了指定背景图片background-image属性的原点位置的背景相对区域.

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

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

2.3 background-color

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

2.4 background-image

用于为一个元素设置一个或者多个背景图像。

background-image: url("../../media/examples/star.png"),
                  url("../../media/examples/lizard.png");

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”

然后元素的边框 border 会在它们之上被绘制，而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性background-clip 和 background-origin 中定义。

2.5 background-position

默认值: 0% 0%

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

2.6 background-repeat

属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

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

2.7 background-size。

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

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
auto	以背景图片的比例缩放背景图片。