在圖像上創建文本疊加
[英]Creating text overlay on an image
問題描述
我正在嘗試確定將文本疊加自動添加到我正在創建的資源庫的圖像上的最佳方法。 我有數百種這樣的資源，我可以在其中抓取項目的“示例圖像”，然后在圖形程序中手動添加資源名稱疊加層。 如果我可以只上傳圖像，然后在 HTML 中添加資源名稱並使其覆蓋名稱並環繞圖像的角並使其看起來正確，那就太好了。 我正在嘗試做的一個例子是http://digitallearning.pcgus.com/Pepper/PPB/General/leadership.html 。 在這一點上這都是手動的，我越能自動化，創建它的過程就會越好。 提前感謝我可以使用的任何建議/代碼。
2 個解決方案
解決方案1
0 2016-03-31 18:37:48
感謝您詢問 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 高 250 像素，但是圖像設置為 230 像素的 100%，因此文本為 20 像素。 但是，您顯然可以修改這些值
解決方案2
0 2016-04-04 18:22:53
這就是我最終得到的，似乎滿足了我的特殊需求。
.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>
如果有人看到任何改進或更改，請告訴我。
在位置可變的圖像上創建帶有文本覆蓋的html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.