<p>Bagaimana hendak meletakkan teks di atas imej dalam CSS? </p> <pre class="brush:php;toolbar:false;"><div class="image"> <img src="sample.png"/> <div class="text"> <h2>Sesetengah teks</h2> </div> </div></pre> <p>Saya ingin melakukan sesuatu seperti di bawah tetapi saya tersekat, inilah css semasa saya</p> <pre class="brush:php;toolbar:false;"><style> .gambar { kedudukan: relatif; } h2 { jawatan: mutlak; atas: 200px; kiri: 0; lebar: 100%; margin: 0 auto; lebar: 300px; ketinggian: 50px; } </style></pre> <p>Saya tidak mendapat sebarang output daripada html2pdf apabila saya menggunakan imej latar belakang: </p> <pre class="brush:php;toolbar:false;"><style> #bekas_gambar{ lebar: 1000px; ketinggian: 700px; background-image:url('switch.png'); } </style> <a href="prints.php">Cetak</a> <?php ob_start( ?> <div id="image_container"></div> <?php $_SESSION['sess'] = ob_get_contents(); ob_flush(); ?></pra> <p>Ini ialah cetakan.php:</p> <pre class="brush:php;toolbar:false;"><?php require_once('html2pdf/html2pdf.class.php'); <?php $html2pdf = HTML2PDF baharu('L', 'A4', 'en'); $html2pdf->writeHTML($_SESSION['sess']); $html2pdf->Output('random.pdf'); ?></pra> <p><br /></p>

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

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

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