图像中的 HTML 元素？答案

【问题标题】：HTML Elements inside an image?图像中的 HTML 元素？
【发布时间】：2026-01-21 03:40:01
【问题描述】：

我为我的登录页面制作了一个由 3 张图片组成的容器

    frost_frame_top.png
    frost_frame_body.png
    frost_frame_bottom.png

它看起来像这样

我在它的 .css 中这样做

    #loginframe_top, #loginframe_center, #loginframe_bottom
    {
        vertical-align: bottom;
    }

我喜欢在图像中添加一些元素，例如文本框、按钮和标签。我怎样才能做到这一点？我是网络开发的新手，希望能找到一些答案。谢谢你

【问题讨论】：

标签： html css login interface

【解决方案1】：

您不能在 <image> 标记内嵌套其他元素。即使它以某种方式在一个浏览器中工作，它也可能在其他浏览器中失败，因为它是一个自关闭标签。

相反，为您的目的使用正确的元素： textarea、Button 和 Label。听起来您需要将它们全部嵌套在表单中以使其以简单的方式工作（例如，如果您不打算使用 javascript 进行验证）。

【讨论】：

【解决方案2】：

创建一个 div“容器”，您要在其中添加文本框、按钮和标签并为其指定绝对位置

.container{position absolute; top:0px;}

并将图像 div 和容器 div 都放在父 div 中并给它位置：相对

【讨论】：

我不知道如何正确地做到这一点，但这就是我did it 和出现like this 的方式，唯一的问题是它一直保持左对齐.. 我希望它居中

【解决方案3】：

也许您可以创建一个以图像为背景的 div，并在 div 内使用元素。

<div class="container">
<input type="text" />
<input type="submit" />     
</div>

.container {
height:346px;
width:678px;
background:url(http://i.stack.imgur.com/ZsWHu.png) no-repeat;

}

http://jsfiddle.net/0jvhzo6g/

【讨论】：