如何在css中的圖像上放置文本

Question

如何在css中的圖像中放置文本？

<div class="image"> 
    <img src="sample.png"/> 
    <div class="text"> 
     <h2>Some text</h2> 
    </div> 
</div> 

我想要做的東西像下面的一個，但我有困難的，這是我目前的CSS

<style> 
.image { 
    position: relative; 
} 

h2 { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    margin: 0 auto; 
    width: 300px; 
    height: 50px; 
} 
</style> 

當我使用背景圖片我沒有得到任何從html2pdf輸出：

<style> 
#image_container{ 
    width: 1000px; 
    height: 700px; 
    background-image:url('switch.png'); 
} 
</style> 
<a href="prints.php">Print</a> 
<?php ob_start(); ?> 
<div id="image_container"></div> 
<?php 
$_SESSION['sess'] = ob_get_contents(); 
ob_flush(); 
?> 

這裏是prints.php：

<?php require_once('html2pdf/html2pdf.class.php'); ?> 
<?php 
$html2pdf = new HTML2PDF('L', 'A4', 'en'); 
$html2pdf->writeHTML($_SESSION['sess']); 
$html2pdf->Output('random.pdf'); 
?> 

Answer 1

如何像這樣：http://jsfiddle.net/EgLKV/3/

它通過使用position:absolute和z-index在圖像上放置文本完成。

#container { 
 
    height: 400px; 
 
    width: 400px; 
 
    position: relative; 
 
} 
 
#image { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#text { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    left: 150px; 
 
    top: 350px; 
 
}

<div id="container"> 
 
    <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" /> 
 
    <p id="text"> 
 
    Hello World! 
 
    </p> 
 
</div>

Answer 2

爲什麼不設置sample.png爲text或h2 CSS類的背景圖片？這將在你寫完圖像後生效。

Answer 3

哈利喬伊指出，將圖像作爲div的背景，然後，如果你只有一個文本行，你可以設置文字的行高度是一樣的股利高度，這將會把你的文字在div的中心。

如果你要設置顯示爲表單元格和垂直對齊，中間多行。

Answer 4

對於響應設計這是好事，使用具有具有被固定佈局的相對佈局和內容（放置在容器）的容器。

CSS樣式：

/*Centering element in a base container*/ 

.contianer-relative{ 
    position: relative; 
} 

.content-center-text-absolute{ 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    height: 0%; 
    margin: auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 51; 
} 

HTML代碼：

<!-- Have used ionic classes --> 
<div class="row"> 
    <div class="col remove-padding contianer-relative"><!-- container with position relative --> 
     <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background --> 
     <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed --> 
    </div> 
    <div class="col remove-padding contianer-relative"><!-- container with position relative --> 
     <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background --> 
     <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed --> 
    </div>  
</div> 

離子性網格佈局，均勻間隔的網格元件和在上面的HTML使用，請參閱所述的類 - Grid: Evenly Spaced Columns。希望它可以幫助你了... :)

Answer 5

這是採用自適應大小工作的另一種方法。它會保持你的文本居中，並保持其父母的位置。如果你不希望它居中，那麼它更容易，只需要使用absolute參數。請記住主容器正在使用display: inline-block。還有很多其他的方法可以做到這一點，這取決於你正在做什麼。

基於關的Centering the Unknown

Working codepen example here

HTML

<div class="containerBox"> 
    <div class="text-box"> 
     <h4>Your Text is responsive and centered</h4> 
    </div> 
    <img class="img-responsive" src="http://placehold.it/900x100"/> 
</div> 

CSS

.containerBox { 
    position: relative; 
    display: inline-block; 
} 
.text-box { 
    position: absolute;  
    height: 100%; 
    text-align: center;  
    width: 100%; 
} 
.text-box:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
h4 { 
    display: inline-block; 
    font-size: 20px; /*or whatever you want*/ 
    color: #FFF; 
} 
img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

Answer 6

爲2017年這是更響應和爲我工作。 這是爲了將文字放在裏面，比如徽章。 而不是數字8，我有一個變量來從數據庫中提取數據。

這個代碼開始Kailas的回答了上述

https://jsfiddle.net/jim54729/memmu2wb/3/

我的HTML

<div class="containerBox"> 
    <img class="img-responsive" src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png"> 
    <div class='text-box'> 
    <p class='dataNumber'> 8 </p> 
    </div> 
</div> 

和我的CSS：

.containerBox { 
    position: relative; 
    display: inline-block; 
} 

.text-box { 
    position: absolute; 
    height: 30%; 
    text-align: center; 
    width: 100%; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    font-size: 30px; 
} 

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: 120px; 
    margin: auto; 
    padding: auto; 
} 

.dataNumber { 
    margin-top: auto; 
} 

Answer 7

做的一個小而短的路同樣的

HTML

<div class="image"> 
    <p> 
     <h3>Heading 3</h3> 
     <h5>Heading 5</h5> 
    </p> 
</div> 

CSS

.image { 
     position: relative; 
     margin-bottom: 20px; 
     width: 100%; 
     height: 300px; 
     color: white; 
     background: url('../../Images/myImg.jpg') no-repeat; 
     background-size: 250px 250px; 
    }