Question

我有这样的图像：

并希望当我悬停时，在它上面获得另一个透明图像。这是css：

#imagebox {

Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
}

#imagebox:hover {
background: url("upplyst-platta.png") no-repeat 0 0;
}

但它背后的图片，在css中解决这个问题的方法是什么？或者我必须用javascript修复它？底部的图像是从db（稍后）生成的，不能在css中设置

编辑：我看到了这个解决方案 http://jsfiddle.net/bazmegakapa/Zf5am/ 但无法让它发挥作用。即使我复制整个代码，可能会出现什么问题？

Answer 1

使用z-index来说明绘制元素的顺序。您可以在此处找到更多信息：http://www.w3schools.com/css/pr_pos_z-index.asp

还有一些其他的事情，你可能想要根据父母的位置和第一种风格中Width的位置添加相对图像的位置，它应该都是小写的width :-P

希望这就是你要找的东西。

Answer 2

#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
background: url("upplyst-platta.png") no-repeat 0 0;
}
 #imagebox img{
display: none;
}
#imagebox:hover img{
display: block;
}

和html结构应该是：

<div id="imagebox"> <img src="iWantToShowThisImage.jpg" /></div>

Answer 3

希望这适合您或提供一些灵感：jsfiddle example #1

根据第一条评论

更新：你的意思是这样的吗？ jsfiddle example #2

基于有问题的编辑

第二次更新：嗯，不工作的原因是hoverimage不仅仅是透明的：它是原始的修改。但它澄清了你的愿望。我真的认为我的第一个例子是你正在寻找的解决方案。只需用透明的png文件名替换样式表中的url。

将图像放在另一个图像上

3 个答案: