css background属性设置示例说明


摘要:
下文讲述css3中background属性使用简介说明,如下所示:


css3 background属性功能说明

background属性功能:
设置指定html元素的背景样式
background属性是一个复合属性,我们可在此属性中一次设置背景的多个样式信息
background属性可一次接收多组不同的属性,每组不同的属性之间使用逗号分隔

background定义和用法
background[ <bg-layer>,]*<final-bg-layer>
<bg-layer> = [ background-image ] || [ background-position ] [ / background-size ]? || [ background-repeat ] || [ background-attachment ] || [ [ background-origin ] || [ background-clip ] ]{1,2}
<final-bg-layer> = [ background-color ] || [ background-image ] || [ background-position ] [ / background-size ]? || [ background-repeat ] || [ background-attachment ] || [ [ background-origin ] || [ background-clip ] ]{1,2}
-----------参数值说明----------------
[background-color]:
设置html标签的背景颜色
[background-image]:
设置html标签的背景图像,此处可为真实图片路径或使用渐变创建的“背景图像”
[background-repeat]:
设置html标签的背景图像如何铺排填充
[background-attachment]:
设置html标签的背景图像是随对象内容滚动还是固定的
[background-position]:
设置html标签的背景图像位置
[background-origin]:
设置html标签的背景图像显示的原点
[background-clip]:
设置html标签的背景图像向外裁剪的区域
[background-size]:
设置html标签的背景图像的尺寸大小
 background复合属性注意事项:
    1.background-color在background多组属性中只可设置一次,通常我们在最后设置一次背景色

例:

---复合属性
background:url(maomao365.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
	   url(maomao365-2.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
	   url(maomao365-3.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box red;
注意,background-color只能设置一次,且由于写在前面的背景会叠在之后的背景之上,所以背景色通常都定义在最后一组上,避免背景色将图像盖住。

---分解为单个属性
background-image:url(maomao365.jpg),url(maomao365-2.jpg),url(maomao365-3.jpg);
background-repeat:no-repeat,no-repeat,no-repeat;
background-attachment:scroll,scroll,scroll;
background-position:10px 20px,10px 20px,10px 20px;
background-size:50px 60px,70px 90px,110px 130px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-color:red;