图像中的HTML元素？

Question

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

    frost_frame_top.png
    frost_frame_body.png
    frost_frame_bottom.png

它看起来像这样

我是通过它的.css

来完成的

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

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

Answer 1

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

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

Answer 2

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

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

将两个图像div和容器div放在父div中并给它定位：relative

Answer 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/