定义和用法
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 属性的设置。 |