background复合属性顺序_background：常用背景属性（复合属性）

定义和用法

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

可以设置如下属性：background-color     | 背景颜色

background-position   | 背景图片位置

background-size    | 背景图片大小

background-repeat     |  背景图片重复填充

background-origin    |  background-position属性应该是相对位置。

background-clip  |  背景的绘制区域

background-attachment   |  背景图片是否滚动

background-image    |  背景图片

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

属性详解：

background-attachment

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

属性值：

background-attachment:fixed

实例

如何指定一个固定的背景图像：

图片地址，不重复，固定

background-blend-mode

--------属性定义了背景层的混合模式(图片与颜色)。

属性值：

background-blend-mode:lighten

实例

div背景为滤色模式

background-blend-mode:screen(滤色模式)

滤色模式效果

background-clip

--------属性指定背景绘制区域。

属性值：

background-clip:padding-box

实例

指定绘图区的背景：

background-clip:content-box

效果

background-color

--------设置一个元素的背景颜色。

属性值：

background-color:yellow

实例

设置部分文字的背景颜色

background-color:yellow

效果

background-image

--------设置一个元素的背景图像。

属性值：

background-image:url(1.png)

实例

多个背景图片

url,origin,clip,size

效果

background-origin

------指定background-position属性应该是相对位置。

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

属性值：

background-origin:border-box

实例

内容框相对定位的背景图片：

border-box,content-box

边框，内容框

background-position

--------设置背景图像的起始位置。

属性值：

background-postion:center right;

实例

如何定位background-image：

background-postion:center

效果

background-repeat

--------设置如何平铺对象的 background-image 属性。

属性值：

background-repeat:no-repeat

实例

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

水平方向重复

效果

background-size

--------指定背景图片大小。

属性值：

background-size:3px 5px;

实例

拉伸背景图像完全覆盖内容面积。

100%

效果