javascript - HTML/CSS - 在 img 标签上显示文本

Question

我正在尝试并排显示两个图像，其中包含文本、控件以及我内心想要的任何其他内容。为此，我有以下内容:

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is text</div>
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>

这一切都很棒，除了一件小事......左边的 div，“redbox.png”总是根据我想要在其中的 s 数量(或元素占据的任何位置)缩小。我可以将元素放在图像之后，但以这种方式将它们放置在我想要的位置确实更容易，并且在我为框设置动画时将它们保持在原位。

现在，为什么我要使用图像而不是 background-img？好吧，我想让图像调整到周围的大小 <div> s 是自动的，这是我发现的唯一轻松完成此操作的方法(使用 javascript 手动调整大小是一种选择，但这样做很复杂，因为框将被动画化)。

有什么想法吗？谢谢!

Answer 1

您应该使用 position:absolute 而不是 position:relative 以使元素脱离流。但是，您需要调整 left 和 top 属性。

http://jsfiddle.net/3fJcR/1/

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
        <div style="position:absolute; left:61px; top:50px; width: 319px; z-index:1">This is text</div>
        <div style="position:absolute; left:61px; top:64px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>