css - 如何在 CSS 中使用多个图像背景和 :hover 伪制作翻转图像

Question

我正在尝试在为网站创建的启动页面上制作一些滚动效果。我想使用 CSS3 拥有多个背景的能力和 :pseudo 类来实现这一点。

这是我的尝试；但是，他不会在 Dreamweaver 或 Chrome 中显示。

#1 {
width: 143px;
height: 142px;
background: url(../assets/Home/1a.jpg) top 0px no-repeat;
background: url(../assets/Home/1b.jpg) top -143px no-repeat;
display: inline-block;
}
#1:hover {
background: url(../assets/Home/1a.jpg) top -143px no-repeat;
background: url(../assets/Home/1b.jpg) top 0px no-repeat;
}

关于如何改进这一点的任何想法或替代路线的建议以实现我的目标？

Answer 1

您是否尝试过 css sprites 并用锚标记包装它，例如 a:hover#l{} (

Answer 2

我认为问题在于您的容器 id: HTML ID tags can't start with a number。我让你的方法基本上没有改变。

HTML

<div id="c1"></div>​

CSS

#c1 {
 border: thin solid black;
 width: 400px;
 height: 200px;
 background: url('http://lorempixel.com/400/200/sports/1/') top left no-repeat;
 background: url('http://lorempixel.com/400/200/sports/2/') top -400px;
 display: inline-block;
}
#c1:hover {
 background: url('http://lorempixel.com/400/200/sports/1/') top -400px no-repeat;
 background: url('http://lorempixel.com/400/200/sports/2/') top left no-repeat;
}

​</p>

http://jsfiddle.net/reCSP/