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

Posted 2023-03-05

【中文标题】使用 HTML 将图像放在另一个图像之上？

【英文标题】：Put images on top of another image using HTML?

【发布时间】：2012-11-17 15:35:35

【问题描述】：

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

【问题讨论】：

哇......真是一群反对票的势利小人。让他休息一下，回答他的问题。

可以通过使用 css 的 z-index 属性来完成！

本世纪最具争议的问题。

他有 26 名代表......他只是想制作一个网页......他最终会弄清楚 SO 规则......我们不必跳下他的喉咙第一个......如果你忘记了，你也从某个地方开始

我很确定他想要一张照片放在另一张照片前，如果在这个过程中必须失去一些生命，那就这样吧。

【参考方案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