4、div+css:定义背景-开源CMS建站第一品牌

@charset"gb2312";
body { background-color:"#999999" }
p {
font-family: "宋体";
font-size:30px;
color:"#FF0000";
}
-->
</style>
</head>
<body>
使用background-color设置了body的背景色
<p>
千山鸟飞绝万径人踪灭
</p>
<p> </p>
</body>
</html>

2．背景图案：background-image

语法：{background-image: url(URL)}

说明： URL就是背景图片的存放路径。

示例 s3-2.htm

<html> <head> <style type="text/css">  </style> </head> <body> 为body设置背景色background-color <br> 为body插入图片background-image <p> 千山鸟飞绝万径人踪灭 </p> <p> </p> </body> </html>

3．图案重复：background-repeat

语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

参数取值范围：

·inherit 继承
·no-repeat 不重复平铺背景图片
·repeat 使图片完全平铺，为默认值
·repeat-x 使图片只在水平方向上平铺
·repeat-y 使图片只在垂直方向上平铺

示例 s3-3.htm

<html> <head> <style type="text/css">  </style> </head> <body> 图案横向重复background-repeat:repeat-x <br> 图案没有重复background-repeat:no-repeat; <p> 千山鸟飞绝万径人踪灭 </p> <p> </p> </body> </html>

4．图案滚动：background-attachment

语法：{background-attachment:fixed|scroll}

参数：

·scroll 页面滚动时背景也滚动
·fixed：页面滚动时背景不滚动

示例 s3-4.htm

<html> <head> <style type="text/css">  </style> </head> <body> 背景图案不随页面滚动background-attachment:fixed； <br> 背景图案随页面滚动background-attachment:scroll； <p> 千山鸟飞绝万径人踪灭 </p> <p> </p> </body> </html>

5．图案定位：background-position

语法：{background-position:数值|top|bottom|left|right|center}

参数：

·top:顶对齐 background-position:top;
·bottom:底对齐 background-position:bottom;
·left：左对齐
·right：右对齐
·center：中心对齐
·绝对数值：background-position:200pt 100pt;
·相对比例：background-position:20% 70%;

示例 s3-5.htm

<html> <head> <style type="text/css">  </style> </head> <body> 图案定位：background-position <p> 千山鸟飞绝万径人踪灭 </p> <p> </p> </body> </html>

示例 s3-6.htm

<html> <head> <style type="text/css">  </style> </head> <body> 图案插入p标签中background-image <p> 千山鸟飞绝万径人踪灭 </p> <p> </p> </body> </html>