定义背景

[设为首页] [加入收藏]

提示：站长书库上线了。站长招聘上人才沃

您当前的位置：首页 > 基础教程 > CSS >

下一篇：边框设置 上一篇：字体的设置

定义背景

1．背景颜色：background-color

语法：{background-color:数值}

说明：参数取值和颜色属性一样，如"＃ff0000"

示例 s3-1.htm

<html> <head> <style type="text/css"> </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>

苏ICP备08101582号