文档详情

css背景属性介绍.doc

发布:2015-08-05约8.27千字共12页下载文档
文本预览下载声明
CSS背景属性 背景颜色属性(background-color) 这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。 body {background-color:#99FF00;} 上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。 演示示例html head title背景颜色 background-color/title style type=text/css body {background-color:#99FF00;} /style /head body p这个HTML使用了CSS的background-color属性,将HTML的背景颜色变成翠绿色。p /body /html 背景图片属性(background-image) 这个属性为HTML元素设定背景图片,相当于HTML中background属性。 body style=background-image:url(../images/css_tutorials/background.jpg) 上面的代码为Body这个HTML元素设定了一个背景图片。 演示示例html headtitle背景图片background-image/title/head body style=background-image:url(../images/css_tutorials/background.jpg) p这个HTML使用了CSS的background-image属性,设置了背景图片。p /body /html 这个HTML使用了CSS的background-image属性,设置了背景图片。 背景重复属性(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} 上面的代码表示图片竖向重复。 演示示例html head title背景重复 background-repeat/title style type=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 pbackground-repeat属性要和background-image一起用。/p /body /html 这个HTML使用了CSS的background-repeat属性,使背景图片竖向重复。 常用的background-repeat的属性值有: repeat-x(横向重复),repeat-x(横向重复), no-repeat(不重复)。 background-repeat属性要和background-image一起用。 背景附着属性(background-attachment) 这个属性和background-image属性连在一起使用,决定图片是跟随内容滚动,还是固定不动。这个属性有两个值,一个是scroll,一个是fixed。缺省值是scroll。 body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed} 上面的代码表示图片固定不动,不随内容滚动而动。 演示示例html head title背景附着属性 background-attachment/title style type=text/css body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed} /style
显示全部
相似文档