css background相关属性总结

background-color

作用：可以指定元素的背景色

1.可以通过以下三种方式指定颜色

有效的颜色名称 - 比如 "red"

十六进制值 - 比如 "#ff0000"

RGB 值 - 比如 "rgb(255,0,0)"

1. 可以为任何 HTML 元素设置背景颜色
2. 扩展：opacity 属性

作用：指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明

注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。（即该属性不仅改变背景色透明度，还会改变其中的子元素透明度，例如其中的文本文字也会变得透明，使得文本阅读困难）

扩展：如果您不希望对子元素应用不透明度，可以使用 RGBA 的透明度

语法：RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

例：

div {

  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */

}

background-image

作用：该属性可以指定元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

语法：

body {

  background-image: url("图片路径");

}

1. 默认情况下，background-image 属性在水平和垂直方向上都重复图像。

2.扩展：background-repeat属性

background-repeat: repeat-x;  仅在水平方向重复,可推：background-repeat: repeat-y;  仅在垂直方向重复

background-repeat 属性还可指定只显示一次背景图像，语法：background-repeat: no-repeat;

扩展：background-position 属性

作用：用于指定背景图像的位置。

可调value：right left top bottom center

语法：例：background-position: right top;

background-attachment 属性

作用：指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

1. 固定背景图像语法：

background-attachment: fixed;

1. 背景图像应随页面的其余部分一起滚动语法：

background-attachment: scroll;

简写背景属性：

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

例：

body {

  background: #ffffff url("tree.png") no-repeat right top;

}

在使用简写属性时，属性值的顺序为：

background-color

background-image

background-repeat

background-attachment

background-position

注意：属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。

background-clip 属性

作用：规定背景的绘制区域

语法：background-clip: border-box|padding-box|content-box;

默认为border-box

border-box：背景被裁剪到边框盒。

padding-box：背景被裁剪到内边距框。

content-box：背景被裁剪到内容框。

background-origin 属性

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

默认值：padding-box

语法：background-origin: padding-box|border-box|content-box;

padding-box：背景图像相对于内边距框来定位。

border-box：背景图像相对于边框盒来定位。

content-box ：背景图像相对于内容框来定位。

注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

background-size

作用：规定背景图像的尺寸

语法：background-size: length|percentage|cover|contain;

length

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

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

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

percentage

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

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

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

cover

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

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

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