Question

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

Answer 1

感谢您对SO的询问！

将来，如果您现在可以添加代码，我们将非常感激。

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

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

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高250px，但图像设置为230px的100％，因此您可以获得20px的文本。显然，您可以修改这些值

Answer 2

This is what I ended up with that seems to have addressed my particular needs.

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

If anyone sees any improvements or changes, please let me know.

在图像上创建文本叠加

2 个答案: