第4章3CSS盒子模型精品.pptVIP

背景图案的翻转－控制背景的显示区域 通过背景定位技术可使背景图片出现在盒子的任意位置上，如果盒子没有背景那么大，那么只能显示背景图的一部分，利用这一点，我们可以将多个背景图片放置在一个大的背景图里，让每个元素只显示这张大背景图的一部分，例如制作导航条时，可以让链接状态显示背景图的上一部分，鼠标滑过时显示背景图的下一部分，这就是背景的翻转，使我们只用一幅图片就能实现背景图的切换。 通过背景图片位置控制实现图片翻转 #nav li a{ color:#FFFFFF; text-decoration:none; padding-top:7px; display:block; width:97px; height:19px; text-align:center; background:url(img/nav.gif); margin-left:2px; } #nav li a:hover{ background:url(img/nav.gif); background-position:0px -26px;/* background-position:left center;*/ color:#FFFFFF; } 将滑动门技术和背景图片翻转结合的例子 a:hover { background-position:100% -42px; } a:hover