Bagaimanakah Saya Boleh Meletakkan Teks Dengan Tepat Di Atas Imej Menggunakan CSS?

Kedudukan Teks Di Atas Imej dengan CSS

Apabila menambahkan teks pada imej dalam CSS, mencapai penjajaran yang tepat boleh menjadi mencabar. Mari kita terokai cara yang berbeza untuk meletakkan teks di atas imej dengan berkesan.

Dalam contoh anda, anda menggunakan kedudukan: mutlak pada elemen teks, yang merupakan pendekatan yang betul. Walau bagaimanapun, kedudukan juga melibatkan penetapan sifat atas, kiri dan lebar dengan tepat.

Dalam kod anda:

.image {
   position: relative;
}

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

Isunya terletak pada penggunaan lebar: 100% dan kiri: 0 pada h2 unsur. Ini menyebabkan teks melangkaui sempadan imej. Sebaliknya, tetapkan lebar kepada nilai px tertentu, pastikan ia lebih kecil daripada lebar imej.

Pilihan lain untuk meletakkan teks di atas imej ialah menggunakan indeks-z dan kedudukan: mutlak. Berikut ialah contoh:

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

Dengan indeks-z, anda boleh meletakkan teks di atas elemen lain. Dengan menetapkan sifat atas dan kiri dengan teliti, anda boleh memastikan teks berada di tengah-tengah imej.

Akhir sekali, apabila menggunakan imej latar belakang, pastikan html2pdf menyokong ciri ini. Jika tidak, anda mungkin tidak mendapat output yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meletakkan Teks Dengan Tepat Di Atas Imej Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!