css列表图片切换效果

最新推荐文章于 2024-07-16 19:35:54 发布

原创最新推荐文章于 2024-07-16 19:35:54 发布 · 634 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #url #html

xhtml+css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS实现复杂背景定位的方法。通过设置不同位置的背景图片，在鼠标悬停状态下展示不同的视觉效果。利用HTML和CSS结合，可以精确控制每个元素的位置及大小。

css 代码:

#skyline {
width: 400px;
height: 200px;
background: url(1.jpg);
margin: 10px auto; padding: 0;
position: relative;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#skyline li, #skyline a {height: 200px; display: block;}
#panel1b {left: 0; width: 95px;}
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}

#panel1b a:hover {background: transparent url(1.jpg) 0 -200px no-repeat;}
#panel2b a:hover {background: transparent url(1.jpg) -96px -200px no-repeat;}
#panel3b a:hover {background: transparent url(1.jpg) -172px -200px no-repeat;}
#panel4b a:hover {background: transparent url(1.jpg) -283px -200px no-repeat;}

html 代码：