background url怎么填充_css background属性设置示例说明

摘要:

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

css3 background属性功能说明

background属性功能:

设置指定html元素的背景样式

background属性是一个复合属性，我们可在此属性中一次设置背景的多个样式信息

background属性可一次接收多组不同的属性，每组不同的属性之间使用逗号分隔

background定义和用法

background[ ,]*

= [ background-image ] || [ background-position ] [ / background-size ]? || [ background-repeat ] || [ background-attachment ] || [ [ background-origin ] || [ background-clip ] ]{1,2}

= [ 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;