预览加载中，请您耐心等待几秒...

CSS背景属性.doc

预览
1/5
2/5
3/5
4/5
5/5

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

CSS背景属性 背景颜色属性(background-color) 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。 body{background-color:#99FF00;} 上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。 HYPERLINK"http://www.admin5.com/html/css_examples/008_css_background_color.html"演示示例 <html> <head> <title>背景颜色background-color</title> <styletype="text/css"> body{background-color:#99FF00;} </style> </head> <body> <p>这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。<p> </body> </html> 背景图片属性(background-image) 这个属性为HTML元素设定背景图片，相当于HTML中background属性。 <bodystyle="background-image:url(../images/css_tutorials/background.jpg)"> 上面的代码为Body这个HTML元素设定了一个背景图片。 HYPERLINK"http://www.admin5.com/html/css_examples/009_css_background_image.html"演示示例 <html> <head><title>背景图片background-image</title></head> <bodystyle="background-image:url(../images/css_tutorials/background.jpg)"> <p>这个HTML使用了CSS的background-image属性，设置了背景图片。<p> </body> </html> 背景重复属性(background-repeat) 这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。 repeat-x背景图片横向重复 repeat-y背景图片竖向重复 no-repeat背景图片不重复 body{background-image:url(../images/css_tutorials/background.jpg);background-repeat:repeat-y} 上面的代码表示图片竖向重复。 HYPERLINK"http://www.admin5.com/html/css_examples/010_css_background_repeat.html"演示示例 <html> <head> <title>背景重复background-repeat</title> <styletype="text/css"> body{background-image:url(../images/css_tutorials/background.jpg);background-repeat:repeat-y} </style> </head> <body> <p>这个HTML使用了CSS的background-repeat属性，使背景图片竖向重复。<p> <p>常用的background-repeat的属性值有:repeat-x(横向重复)，repeat-x(横向重复),no-repeat(不重复)。</p> <p>background-repeat属性要和background-image一起用。</p> </body> </html> 背景附着属性(background-attachment) 这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。 body{background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat;background-attachment:fixed} 上面的代码表示图片固定不动，不随内容滚动而动。 HYPERLINK"http://www.admin5.com/html/css_examples/011_css_background_attachment.