在图像上创建文本叠加答案

【问题标题】：Creating text overlay on an image在图像上创建文本叠加
【发布时间】：2016-04-05 02:22:53
【问题描述】：

我正在尝试为我正在创建的资源库确定自动将文本叠加层添加到图像上的最佳方法。我有数百种此类资源，我在其中获取项目的“示例图像”，然后在图形程序中手动添加资源名称覆盖。如果我可以只上传图像然后在 HTML 中添加资源名称并让它覆盖名称并环绕图像的角落并使其看起来正确，那就太好了。我正在尝试做的一个例子是http://digitallearning.pcgus.com/Pepper/PPB/General/leadership.html。在这一点上，这都是手动的，我可以自动化的越多，创建它的过程就会越好。提前感谢我可以使用的任何建议/代码。

【问题讨论】：

习惯上添加您已经完成的相关代码，以便我们可以更轻松地对您现有的内容提出建议或编辑。既然已经说过，您应该创建一个容器，该容器将数据绑定到图像并且是循环的一部分，在该容器内，您将拥有一个具有绝对定位和比图像更高 z-index 的跨度或标签标签，这还数据绑定到在上传到循环时与图像一起输入的名称。
以后一定会的，谢谢。

标签： html css image

【解决方案1】：

感谢您的提问！

如果您现在可以添加您的代码（如果有的话），我们将不胜感激。

有多种方法可以做到这一点，这完全取决于你如何编写代码。

我会这样做的方式是使用引导行（用于内联图像），然后插入此代码（为您的应用程序修改）：

HTML：

<div class="col-xs-4">
    <div class="imageTextContainer">
        <div class="imagePart">
            <img src="imgSrcHere" />
        </div>
        <p>Your text here</p>
    </div>
</div>

<div class="col-xs-4">
    <div class="imageTextContainer">
        <div class="imagePart">
            <img src="img2SrcHere" />
        </div>
        <p>Your text here</p>
    </div>
</div>

<div class="col-xs-4">
    <div class="imageTextContainer">
        <div class="imagePart">
            <img src="img3SrcHere" />
        </div>
        <p>Your text here</p>
    </div>
</div>

自定义 CSS：

.imageTextContainer {
    height: 250px;
    background-color: #0000FF
}

.imagePart {
    height: 230px;
}

.imagePart > img {
    height: 100%;
}

希望这会有所帮助。

之所以可行，是因为包含图像和文本的 div 高 250 像素，但图像设置为 230 像素的 100%，因此文本为 20 像素。但是，您显然可以修改这些值

【讨论】：

谢谢，我会在星期一试一试，看看它对我有什么好处。我很感激。

【解决方案2】：

这是我最终得到的，似乎满足了我的特殊需求。

.wrap {
  /* force the div to properly contain the floated images: */
  position:relative;
  float:left;
  clear:none;
  overflow:hidden;
}

.wrap img {
  position:relative;
  z-index:2;
  width:200px;
  height:125px;
  border:2px solid #1F497D;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; 
  z-index:1; 
}

.wrap img:hover {
  -webkit-filter: brightness(70%);
  -moz-filter: brightness(70%);
  -o-filter: brightness(70%);
  -ms-filter: brightness(70%);
  filter: brightness(70%);
}

.wrap .desc {
  display:block;
  position:absolute;
  width:100%;
  top:55%;
  left:0;
  background-color: rgba(31,73,125,0.85);
  font-family: 'Arvo', serif;
  font-size:11px;
  color: #FFF;
  text-shadow: 1px 1px #111111;
  font-weight:normal;
  display:flex;
  text-align:center;
  justify-content:center;
  align-items:center;
  bottom: -5%;
  -webkit-border-radius: 0px 0px 10px 10px;
  -moz-border-radius: 0px 0px 10px 10px;
  border-radius: 0px 0px 10px 10px; 
  z-index: 1;
}

<!DOCTYPE html>
<html>
<head><title>Client Resources</title>
<link href="learningmat.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo|Alice|Roboto|Roboto+Condensed|Alegreya:700">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="list">
  <h1 class="list2">Client Resources</h1>
  <hr class="list2">
  <p>SOME KIND OF DESCRIPTION</p>

<img src="imgs/spacer.png" class="spacer2">

<a href="docs/03 - How do we define urgency.pdf" target="_blank">
<div class="wrap">
	<img src="imgs/Urgency.jpg" />
	<h3 class="desc">How Do We Define Urgency?</h3>
</div>
</a>
  </div>
</body>
</html>

如果有人看到任何改进或更改，请告诉我。

【讨论】：