html图片定位案例,css 背景图片定位在菜单效果中的应用实例

Example Source Code [www.52css.com]

#menu {

list-style: none;

padding: 0;

margin: 0;

width: 774px;

height: 210px;

background: url(images/menu-bg.jpg) no-repeat;

position: relative;

}

#menu span {

display: none;

position: absolute;

}

#menu a {

display: block;

text-indent: -900%;

position: absolute;

outline: none;

}

#menu a:hover {

background-position: left bottom;

}

#menu a:hover span {

display: block;

}

#menu .home {

width: 144px;

height: 58px;

background: url(images/home.gif) no-repeat;

left: 96px;

top: 73px;

}

#menu .home span {

width: 86px;

height: 14px;

background: url(images/home-over.gif) no-repeat;

left: 28px;

top: -20px;

}

#menu .about {

width: 131px;

height: 51px;

background: url(images/about.gif) no-repeat;

left: 338px;

top: 97px;

}

#menu .about span {

width: 40px;

height: 12px;

background: url(images/about-over.gif) no-repeat;

left: 44px;

top: 54px;

}

#menu .rss {

width: 112px;

height: 47px;

background: url(images/rss.gif) no-repeat;

left: 588px;

top: 94px;

}

#menu .rss span {

width: 92px;

height: 20px;

background: url(images/rss-over.gif) no-repeat;

left: 26px;

top: -20px;

}