Bagaimana untuk meletakkan teks pada imej menggunakan CSS

Question

Bagaimana hendak meletakkan teks di atas imej dalam CSS?

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

Saya ingin melakukan sesuatu seperti di bawah tetapi saya tersekat, inilah css semasa saya

<style>
.gambar {
   kedudukan: relatif;
}

h2 {
   jawatan: mutlak;
   atas: 200px;
   kiri: 0;
   lebar: 100%;
   margin: 0 auto;
   lebar: 300px;
   ketinggian: 50px;
}
</style>

Saya tidak mendapat sebarang output daripada html2pdf apabila saya menggunakan imej latar belakang:

Cetak



Ini ialah cetakan.php:
writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

Answer 1

Ini satu lagi cara untuk menggunakan dimensi responsif. Ia akan memastikan teks anda terpusat dan mengekalkan kedudukannya dalam induk. Kalau tak nak berpusat pun lagi senang, pakai sahaja absolute 参数即可。请记住，主容器正在使用 display: inline-block. Terdapat banyak cara lain untuk mencapai ini, bergantung pada perkara yang anda sedang usahakan.

Berdasarkan berpusat pada yang tidak diketahui

Berikut ialah contoh codepen yang berfungsi

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 2

Bagaimana dengan sesuatu seperti ini: http://jsfiddle.net/EgLKV/3/< /p>

Selesai dengan meletakkan teks pada imej menggunakan 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>