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>