背景颜色
background-color：<color>
- 默认值：transparent
背景图片
background-image:<bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none
- 通过url()引入图片地址
background-image: url("1.gif");绝对地址/相对地址，引号可以省略； - 可以引入多个图片，先引入的在上面，后引入的在下面
- 可以同时设置背景颜色，背景颜色始终在图片的下面，最下层
背景图片平铺
background-repeat：<repeat-style> [ , <repeat-style> ]*
<repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2}
取值：
- 默认值：'repeat'
- repeat-x： 背景图像在横向上平铺
- repeat-y： 背景图像在纵向上平铺
- repeat： 背景图像在横向和纵向平铺
- no-repeat： 背景图像不平铺
- round： 背景图像自动缩放直到适应且填充满整个容器。（CSS3）
- space： 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
说明：
- 必须先指定
<' background-image '>属性 ，多个<repeat-style>和<' background-image '>一一对应 - 允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
- 如果只提供1个参数，则用于横向和纵向。
背景固定
background-attachment：<attachment> [ , <attachment> ]*
<attachment> = fixed | scroll | local
取值
- 默认值：scroll
- fixed： 背景图像相对于窗体固定。
- scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
- local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）
背景图片定位
background-position：<position> [ , <position> ]*
<position> = [ left | center | right | top | bottom | <percentage> | <length> ] |
[ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
取值
- 默认值：
0% 0%;效果等同于:left top -
<percentage>： 用百分比指定背景图像填充的位置。可以为负值。图片百分比的位置定位到容器相对应百分比的位置 - <length>： 用长度值指定背景图像填充的位置。可以为负值。
说明
- 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
- 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
- 如果提供三或四个，每个
<percentage>或<length>偏移前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。 - 示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px
background:url(test1.jpg) no-repeat right 20px bottom 20px
- 也可以设置3个参数值
background:url(test1.jpg) no-repeat left bottom 10px;
背景颜色渐变
线性渐变
linear-gradient([ [<angle> | to <side-or-corner>] ,]? <color-stop> [, <color-stop>]+)
<side-or-corner>=[left|right]||[top|bottom] 默认to bottom
<color-stop>=<color>[<percentage>|<length>]?
background-image:linear-gradient(red,blue)
background-image:linear-gradient(0deg,red,blue)
background-image:linear-gradient(red,green,blue)
background-image:linear-gradient(red,green 20%,blue) green在20%的位置
径向渐变
radial-gradient([ circle || <length> ] [ at <position> ]? ,|
[ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,|
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,|
at <position> ,
<color-stop> [ , <color-stop> ]+)
-
[ circle || <length> ] [ at <position> ]?- 设置一个圆、半径以及圆心所在位置
-
[ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]？- 椭圆、两个半径以及中心点位置
-
<extent-keyword>- 渐变区域的大小，默认值farthest-side
- closest-corner | closest-side | farthest-corner | farthest-side
repeating-*-gradient()
重复渐变
背景图片原点位置
设置背景图片展示的区域
默认值padding-box
background-origin:<box>[,<box>]?
<box>=border-box|padding-box|content-box
注意：当使用 background-attachment 为fixed时，该属性将被忽略不起作用。
背景图片裁剪
设置元素的背景（背景图片或颜色）是否延伸到边框下面。
默认值 border-box
background-clip:<box>[,<box>]?
<box>=border-box|padding-box|content-box
背景图片大小
background-size:：<bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
取值
- 默认值：
auto -
<length>： 用长度值指定背景图像大小。不允许负值。 相对容器的百分比 -
<percentage>： 用百分比指定背景图像大小。不允许负值。 -
auto： 背景图像的真实大小。 -
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 -
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
背景样式简写
background：[ <bg-layer>, ]* <final-bg-layer>
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <' background-color '>
说明
背景颜色只能在最后那一层
