基本用法示例:
background:#00FF00 url(bgimage.gif) no-repeat fixed top;}
属性说明:
background:背景色 背景图像 背景图像是否及如何重复 背景图像是否固定或者随着页面的其余部分滚动 背景图像的起始位置
背景色
color-name
color-rgb
color-hex
transparent
背景图像
url(URL)
none
背景图像是否及如何重复
repeat
repeat-x
repeat-y
no-repeat
背景图像是否固定或者随着页面的其余部分滚动
scroll
fixed
背景图像的起始位置
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
background:#00FF00 url(bgimage.gif) no-repeat fixed top;}
属性说明:
background:背景色 背景图像 背景图像是否及如何重复 背景图像是否固定或者随着页面的其余部分滚动 背景图像的起始位置
背景色
color-name
color-rgb
color-hex
transparent
背景图像
url(URL)
none
背景图像是否及如何重复
repeat
repeat-x
repeat-y
no-repeat
背景图像是否固定或者随着页面的其余部分滚动
scroll
fixed
背景图像的起始位置
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
在dreamwear中设置如下:
实际应用
给<a>元素设置背景图像
背景图像为
制作圆点指示器,平时背景为下方的圆点,当鼠标悬停时,背景为上方的圆点
/*设置圆点的样式*/
/*主要是把<a>元素变成块状,背景图像高度为32px,有上下2个圆点,所以只取一半,另一半隐藏,-16px表示取下面的圆点*/
.flex-control-paging li a {
background: url(images/dot.png) no-repeat 0 -16px;
display: block;
height: 16px;
overflow: hidden;
text-indent: -99em;
width: 16px;
cursor: pointer;
}
/*当鼠标悬停在圆点上时,取上面的圆点*/
.flex-control-paging li a.flex-active,
.flex-control-paging li.active a {
background-position: 0 0;
}