css背景属性介绍.doc
文本预览下载声明
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
显示全部