使用 HTML 将图像放在另一个图像之上？答案

【问题标题】：Put images on top of another image using HTML?使用 HTML 将图像放在另一个图像之上？
【发布时间】：2012-11-17 15:35:35
【问题描述】：

我想知道如何将一个图像作为背景，并在 HTML 中将其他按钮图像放在其顶部？

【问题讨论】：

哇......真是一群反对票的势利小人。让他休息一下，回答他的问题。
可以通过使用 css 的 z-index 属性来完成！
本世纪最具争议的问题。
他有 26 名代表......他只是想制作一个网页......他最终会弄清楚 SO 规则......我们不必跳下他的喉咙第一个......如果你忘记了，你也从某个地方开始
我很确定他想要一张照片放在另一张照片前，如果在这个过程中必须失去一些生命，那就这样吧。

标签： html css image browser web

【解决方案1】：

您需要将它们放在容器div 中，然后相对定位。

这样的事情可以做到：

<div style="position:relative; left:0; top:0;">
  <img src="x.png" style="position:relative; top:0; left:0;"/>
  <img src="y.png" style="position:absolute; top:30; left:70;"/>
</div>

【讨论】：

谢谢！它在大多数情况下都有效，但是如果我使用 CSS 制作翻转按钮，我将如何做到这一点，这是我的代码：<style type="text/css"> a.menurollover { display: block; width: 320px; height: 40px; background-image: url('menuButton1.jpg'); } a.menurollover:hover { background-image: url('menuButton2.jpg'); }

【解决方案2】：

是的，你绝对可以这样做……这篇文章可以给你一些定位图像的技巧……

Making an image position relative to the top of the page

【讨论】：