DIV CSS background背景色背景图片用法知识教程篇

背景目录

1. Css background背景语法
2. css背景色
3. css背景图片
4. 复合背景样式简写
5. 背景background总结

一、Css background背景语法   -   TOP

Background背景样式的值是复合属性值组合，也就是背景单词的值可以跟多个属性值，值与值之间使用一个空格间隔链接上即可。
如：
background:#000 url(图片地址) no-repeat left top

Css background背景作用：
1、设置纯色背景。背景background可以设置对象纯色的背景颜色，
2、设置图为背景。可以设置对象背景为图片，如果背景是图片可以让图片重复平铺横铺，或将图片作为对象背景固定在对象任何位置。

背景语法：
background: background-color || background-image || background-repeat || background-attachment || background-position

Background分析解析图

background分析图

Body{background:#FFF url(http://www.thinkcss.com/images2012/logo.gif) no-repeat 0 0 fixed }
设置网页背景样式

二、css背景色   -   TOP

background-color:#FFF
div{background-color:#FFF}
设置对象背景为纯白色

三、css背景图片   -   TOP

background-image :url (url)
background-image :url (http://www.thinkcss.com/images2012/logo.gif）

设置对象背景为图片http://www.thinkcss.com/images2012/logo.gif
如果图片作为背景时候要求是否重复平铺，平铺方向等我们都需要background-position和background-repeat配合使用
div{background-image :url (http://www.thinkcss.com/images2012/logo.gif);background-repeat : no-repeat;background-position : 5px 6px }
这里定义对象div，背景图片为http://www.thinkcss.com/images2012/logo.gif，并且背景图片不重复，定位于div对象靠左距离5px，靠上距离6px

四、复合背景样式简写   -   TOP

我们使用时候都需要考虑到代码优简，这里可以优化的简写代码
1、如果只设置背景为单一颜色
background-color:#FFF
我们简写为：
background:#FFF

2、图片设置为背景简写
background-image :url (http://www.thinkcss.com/images2012/logo.gif);background-repeat : no-repeat;background-position : 5px 6px
我们简写为：
background:url (http://www.thinkcss.com/images2012/logo.gif) no-repeat 5px 6px

五、背景background总结   -   TOP

网页布局时候我们常常对网页背景设置颜色、背景设置图片，达到我们需要的美观效果，我们实践制作写css background背景尽量从简，图片引入时候注意路径正确，如需定位对象背景。

经典背景复合属性表达式：
thinkcss{background:#FFF url (http://www.thinkcss.com/images2012/logo.gif) no-repeat 5px 6px}
这里既设置背景颜色，背景图片引入，背景图片定位、图片作为背景是否重复的样式。

标签(Tag): background 背景