定义和用法

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性:

background-color       规定要使用的背景颜色。

background-position    规定背景图像的位置。

background-size        规定背景图片的尺寸。

background-repeat      规定如何重复背景图像。

background-origin     规定背景图片的定位区域。

background-clip         规定背景的绘制区域。

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

background-p_w_picpath       规定要使用的背景图像。

那么具体我们该怎么用呢?

再来看一张表

属性作用
background-color规定要使用的背景颜色。color_name 规定颜色值为颜色名称的背景颜色(比如 red)。
hex_number规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
rgb_number规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
transparent默认。背景颜色为透明。
inherit规定应该从父元素继承 background-color 属性的设置。
background-position  设置背景图像的起始位置

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

如果您仅规定了一个关键词,那么第二个值将是"center"。

默认值:0% 0%。




x%  y%

第一个值是水平位置,第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值,另一个值将是 50%。


xpos  ypos

第一个值是水平位置,第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值,另一个值将是50%。

您可以混合使用 % 和 position 值。

background-size

规定背景图片的尺寸

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

lengt


设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

h

percentage


以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。


cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。


contain

把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。




background-repeat

规定如何重复背景图像

repeat

默认。背景图像将在垂直方向和水平方向重复。

repeat-x

背景图像将在水平方向重复。

repeat-y

背景图像将在垂直方向重复。

no-repeat

背景图像将仅显示一次。

inherit

规定应该从父元素继承 background-repeat 属性的设置。

background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释:如果背景图像的 background-p_w_upload 属性为 "fixed",则该属性没有效果

padding-box

背景图像相对于内边距框来定位。

border-box

背景图像相对于边框盒来定位。

content-box

背景图像相对于内容框来定位。

background-clip 规定背景的绘制区域。

border-box

背景被裁剪到边框盒。

padding-box

背景被裁剪到内边距框。

content-box

背景被裁剪到内容框。

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

scroll

默认值。背景图像会随着页面其余部分的滚动而移动。

fixed

当页面的其余部分滚动时,背景图像不会移动。

inherit

规定应该从父元素继承 background-p_w_upload 属性的设置。

background-p_w_picpath 设置背景图像

url('URL')

指向图像的路径。

none

默认值。不显示背景图像。

inherit

规定应该从父元素继承 background-p_w_picpath 属性的设置。

inherit规定应该从父元素继承 background 属性的设置。