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

【问题标题】：HTML/CSS - Displaying text over an img tagHTML/CSS - 在 img 标签上显示文本
【发布时间】：2011-09-19 23:49:46
【问题描述】：

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

<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手动调整大小是一种选择，但这样做很复杂，因为框将被动画化)。

有什么想法吗？谢谢！

【问题讨论】：

标签： javascript html css tags z-index

【解决方案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>

【讨论】：

事情是内容会经历很多动画，如果我使用绝对定位，它不会停留在我想要的位置......
hm...我想不出任何其他方法可以让元素脱离流程:(
@David 让父 div position: relative 和子 div position: absolute。这将使子级在相对父级的位置内保持绝对。（父母是leftDiv 和rightDiv？）
@Joseph 我冒昧地编辑了您的帖子以包含新代码。
哇哦。很好，@JamesKhoury。我什至没有注意到父母不是position:relative。是的，将父级设为position:relative 不会影响其位置（前提是您不理会top: left: 等），并将position:absolute 子级隔离到其边界。

【解决方案2】：

您也可以将position:absolute 用于包装div 和position:absolute 用于内部覆盖。那么内部绝对是相对于外部绝对定位元素而不是主体。

看看这个例子，看看我在说什么：

http://jsfiddle.net/mohsen/TbkjK/7/

【讨论】：

@Mohesen Coffee 用两个 e 拼写；)。我不认为他需要包装 div 的位置是绝对的，因为这会使它们与文档的其余部分脱离。那么网站的其他部分就无法使用它了。

【解决方案3】：

为了在图像上写文字，你可以将图像设置为背景样式和 alt 文本，如下所示-

<img scr="" alt="text"/>

<style>
.img{background-image:url('IMAGE_URL'); }
</style>

【讨论】：