html - 将一个图像放在另一个图像上

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

还有一些其他的事情，您可能想根据 parent 的位置和您所说的位置添加相对图像放置 Width在第一种风格中，它应该全部小写 width :-P

希望这就是您要找的。