CSS在不同位置的图像上获取多个文本框答案

【问题标题】：CSS to get multiple text boxes over image in various locationsCSS在不同位置的图像上获取多个文本框
【发布时间】：2014-12-22 15:28:42
【问题描述】：

这是我的挑战：我有一张不动产的图像，该图像将随机加载到 200 像素宽的 DIV 中。因此，图像将被调整为 200 像素宽度和可变高度（保持比例）。我有四个单独的标题需要添加到图像上：

标题
价格
位置
表面

它们需要分别位于图片的中上、左下、左下和右下。所以我会有类似的东西：

--------------------------------
|             Title            |
|                              |
|                              |
|Price                         |
|Location               Surface|
--------------------------------

我知道我可以通过将 div 置于相对位置并将文本置于绝对位置来将文本覆盖到图像上，但我似乎只能为下面的所有文本 div 设置一个位置，无论我有多少类使用。

有什么建议吗？？

编辑：找到解决方案。作为参考，这里是生成的代码：

<div id="stampRandom">
    <img class="stampImg" src="myphoto.jpg">
    <div class="title"><span>Title</span></div>
    <div class="prix"><span>Location</span><span><br><b>Price</b></span></div>
    <div class="surf"><span><b>Surface</span></b></span></div>                  
</div>

还有 CSS：

#stampRandom {
    position: relative;
    top: 0px;
    left: 0px;
    width: 200px;
    color: #FFF;
    font-size: 80%;
}

#stampRandom {
    position: relative; 
    top: 0; 
    left: 0; 
    width:200px;
    color: #ffffff;
    /*    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; */
    font-size:80%;
}
#stampRandom img {
    top:0px;
    left:0px;
    width:200px;
}
#stampRandom div {
    position: absolute; 
    width: 200px; 
}
#stampRandom div span {
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(50, 50, 50, 0.7);
}
.title {
    top:2px;
    width:100%;
    text-align:center;
}
.prix {
    bottom:0px;
    left:0px;
}
.surf {
    bottom:0px;
    right:0px;
    text-align:right;
}

感谢所有提供帮助的人！我被阻止了很多次，我的代码需要重做。新鲜出炉！

【问题讨论】：

您需要我们什么来帮助您？
给我们一些代码，天哪。

标签： html css image captions

【解决方案1】：

http://jsfiddle.net/h51xLdzg/

<style>
.img-cont{position:relative;width:200px;}
.img-cont div{position:absolute; background:red}
.img-title{top:0px;width:100%;text-align:center;}
.img-price{bottom:0px; left:0px;}
.img-surf{bottom:0px; right:0px;text-align:right;}
</style>
<div class="img-cont">
    <img src="/MyImage.jpg" width="200"/>
    <div class="img-title">
        Title
    </div>
    <div class="img-price">
        Price Location 
    </div>
    <div class="img-surf">
        Surface
    </div>
</div>

认为这会对你有所帮助

【讨论】：

这个很简单，适用于示例。出于某种原因，当我将它与我的所有 PHP 标签一起应用时，我不得不添加“text-align:right;”到 img-surf 类让它工作。
当然，我只是错过了右下对齐（img-surf）div。已编辑

【解决方案2】：

我举了一个简单的例子来说明如何做到这一点。它并不完美，但它有效。如果您需要其他帮助或不同的方法，请告诉我

http://jsfiddle.net/hg9r7/134/

<div class="imageWrapper">
 <img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
 <div class="top">TOP</div>
 <div class="bot">BOT</div>
 <div class="botleft">BOTLEFT</div>
 <div class="botright">BOTRIGHT</div>
</div>

左下角和左下角文本的 CSS 示例：

.bot{
 position:absolute;
 background:red;
 text-align:center;
 margin:0 auto;
 width:100px;
 left:50%;
 margin-left:-50px;
 bottom:0;
}

.botleft{
 position:absolute;
 background:red;
 text-align:center;
 margin:0 auto;
 width:100px;
 left:0;
 bottom:0;
}

【讨论】：