12.CSS+DIV之强化background属性
Posted on 星期四, 六月 21st, 2007 at 10:35 下午. 2,736次浏览在徐果萍博客上节的依葫芦画瓢学CSS+DIV中主要强化了关于text属性的内容，文本对齐属性(text-align)，文本修饰属性(text-decoration)，文本缩进属性(text-indent)，行高属性(line-height)，字间距属性(letter-spacing)，相似度很高，而且比较简单，应该比较容易上手。今天主要学习背景属性(background)相关参数以及各自单独写法以及综合写法。学习笔记整理内容摘录如下，方便自己今后复习或查询之用。
1.背景颜色属性(background-color)，设定背景颜色＝html中bgcolor属性。我来写一个红色背景的body，(也可以定义某个特定区域)
示例写法：body {background-color:red;}
2.背景图片属性(background-image)，设定背景图片=html中background属性，为body设置一个背景图片。
示例写法：body {background-image:url(../images/图片路径)”}
3.背景重复属性(background-repeat)，它和背景图片属性连用，决定背景图片是否重复。在默认不设置状态下，图片向横向、坚向重复。其相关参数主要有：repeat-x 背景图片横向重复，repeat-y背景图片竖向重复，no-repeat背景图片不重复。
示例写法：body {background-image:url(../images/图片路径);background-repeat:repeat-y;}
4.背景附着属性(background-attachment)，类似于背景重复属性，和背景图片属性连用，决定图片是否跟随内容滚动。其参数值主要有：scroll(滚动)，fixed(固定)，默认为scroll。
示例写法：body {background-image:url(../images/图片路径); background-repeat:no-repeat; background-attachment:fixed;}
5.背景位置属性(background-position)，类似于背景重复属性，和背景图片属性连用，
决定背景图片的最初位置。下面写入一个背景图片的初始位置距离网页最左面5px，距离网页最上面10px。
示例写法：body {background-image:url(../images/图片路径);background-repeat:no-repeat; background-position:5px 10px;}
6.背景属性(background)，背景相关属性的综合写法，包括上述写的五个属性。这个简洁的写法可以省略background-color, background-image, background-repeat,backgroundattachment, background-position。
示例写法：body {background:#000 url(../images/图片路径) no-repeat fixed 5px 10px;}
最后写了一个背景属性的综合写法，点击运行代码，即可预览效果。下一课时我将学习列表属性list-style，还是会以学习笔记的形式整理出来，与更多的CSS+DIV学习者相互交流！
<html>
<head>
<title>徐果萍博客</title>
<style type=”text/css”>
body {background:blue url(/attachments/month_0705/8200758214325.gif) repeat-x scroll 5px 5px;}
</style>
</head>
<body>
<p>今天主要学习背景属性(background)相关参数以及各自单独写法以及综合写法。学习笔记整理内容摘录如下，方便自己今后复习或查询之用。</p>
</body>
</html>
