HTML / CSS - 在img标签上显示文字 [英] HTML/CSS - Displaying text over an img tag

问题描述

我试图通过文字，控件和其他任何我想要的方式来显示两幅图像。
要做到这一点，我有以下几点：

 < div> 
< div id =leftDivstyle =float：left; width：49％; height：400px; background-color：transparent> 
< div style =position：relative; left：61px; top：100px; width：319px; z-index：1>这是文字< / div> 
< div style =position：relative; left：61px; top：100px; width：319px; z-index：1>这也是文字< / div> 
< img id =leftImgalt =Images / redbox.png
 style =width：100％; height：100％; z-index：-1; right：1124px; top ：9px; 
 src =图片/ redbox.png/> 
 
< / div> 
< div id =rightDivstyle =float：left; width：49％; height：400px; background-color：transparent> 
 < / div> 
< / div> 
  

除了一件小事外，这一切都很棒......左边的div，redbox.png 总是通过我想要的内部数量（或者元素所占的任何位置）来减少。
我可以将这些元素放置在图像之后，但将它们放置在我想要的位置并将它们放在适当的位置会更容易。

现在，我为什么要使用图像而不是background-img？那么我希望图像自动调整到周围的< div> s，这是我发现的轻松实现的唯一方法（用javascript手动调整大小是一个选项，但那是一个复杂的问题，因为盒子会变成动画）。

有什么想法吗？您应该使用位置：绝对而不是<$

c $ c> position：relative 以便将元素从流中移出。不过，您需要调整左侧和顶部的属性。

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

 < div> 
< div id =leftDivstyle =float：left; width：49％; height：400px; background-color：transparent; position：relative> 
< div style =position：absolute; left：61px; top：50px; width：319px; z-index：1>这是文字< / div> 
< div style =position：absolute; left：61px; top：64px; width：319px; z-index：1>这也是文字< / div> 
< img id =leftImgalt =Images / redbox.png
 style =width：100％; height：100％; z-index：-1; right：1124px; top ：9px; 
 src =图片/ redbox.png/> 
 
< / div> 
< div id =rightDivstyle =float：left; width：49％; height：400px; background-color：transparent; position：relative> 
 < / div> 
< / div> 
  

I'm trying to display two images side to side, with text, controls and whatever else my heart desires over them. To do this, I have the following:

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

This is all great except for one little thing... The left div, the "redbox.png" is always scooted down by the number of s I want inside it (or any place taken by the elements). I could place the elements after the image, but it's really easier to place them where I want this way, and to keep them in place when I animate the boxes.

Now, why am I using images instead of background-img? Well I want the images to resize to the surrounding <div>s automatically, and this is the only way I found of doing it easily (resizing manually with javascript is an option, but a complicated one at that, since the boxes will be animated).

Any ideas? Thanks!

解决方案

You should use position:absolute rather than position:relative in order to take the element out of flow. You will need to adjust the left and top attributes, however.

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>

这篇关于HTML / CSS - 在img标签上显示文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！