DIV CSS background背景色背景图片用法知识篇
DIV CSS 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 背景
下一页: 下一篇:没有了
HTML必备基础教程
- • html换行br标签
- • html段落p标签
- • html table tr td th表格标签
- • html内容body标签
- • html图片img标签
- • html form表单标签
- • html input表单标签
- • html列表菜单跳转select标签
- • html div
- • html span
- • html em强调标签
- • html u下划线
- • html斜体i标签
- • html加粗b标签
- • html strong加粗标签
- • html删除线s标签
- • base链接打开方式标签
- • html iframe内嵌
- • html ul li无序列表
- • html ol li有序列表
- • html font文本标签
- • html hr水平线
CSS必备基础教程
- • css颜色 css color)
- • css宽度 css width
- • css高度 css height
- • css行高 css line-height
- • css 字间距 css letter-spacing)
- • CSS border(CSS边框
- • CSS font-family CSS字体
- • CSS 浮动 CSS float
- • CSS 斜体 CSS font-style
- • CSS加粗 CSS font-weight
- • CSS 下划线 CSS text-decoration
- • CSS字母大小写 CSS text-transform
- • CSS背景 CSS background
如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-11-06 点击:
次
原创来源:ThinkCSS 来源网址:http://www.thinkcss.com/view/c93.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!。