Cara Menampilkan Teks pada Gambar dengan Posisi Relatif - Pada kesempatan kali ini saya akan sedikit berbagi tentang cara menampilkan teks diatas gambar. Sebelumnya saya juga sempat memposting tutorial yang tujuannya hampir sama. Sama-sama berisikan cara menampilkan teks pada gambar, namun dengan cara yang berbeda. Cara yang saya gunakan pada postingan sebelumnya menggunakan background-image css. Pada pada postingan kali ini saya akan memberikan cara lain untuk menampilkan teks pada gambar, yaitu dengan menggunakan posisi relatif gambar.
Mengatur posisi relatif teks diatas gambar dapat kita lakukan dengan menggunakan nilai top, right, bottom dan left untuk memposisikan elemen p yang kita gunakan. Kita juga dapat menentukan margin-top untuk menghilangkan ruang putih diatas gambar. Berikut adalah langkah-langkah menampilkan teks diatas gambar dengan menggunakan posisi relatif.
- Buatlah file .html untuk memanggil gambar dan menuliskan teks. Gunakan script dibawah ini.
<div class="teksgambar">
<img src="image/pantai_binangun.JPG" width="640" height="480"/>
<p>Menikmati Sunset Pantai Binangun Yang Mantap!!!!!!!!</p>
</div>
<img src="image/pantai_binangun.JPG" width="640" height="480"/>
<p>Menikmati Sunset Pantai Binangun Yang Mantap!!!!!!!!</p>
</div>
- Buatlah file .css untuk mengatur style css nya.
.teksgambar img{
margin-top: -10px;
width: 640px;
height: 480px;
}
.teksgambar p{
position: absolute;
top: 420px;
left: 30px;
right: 20px;
width: 300px;
height: 40px;
color: #FFF;
font: bold 15px sans-serif;
}
margin-top: -10px;
width: 640px;
height: 480px;
}
.teksgambar p{
position: absolute;
top: 420px;
left: 30px;
right: 20px;
width: 300px;
height: 40px;
color: #FFF;
font: bold 15px sans-serif;
}
Cukup sekian postingan dari saya tentang Cara Menampilkan Teks pada Gambar dengan Posisi Relatif. Semoga bermanfaat dan terima kasih.
Posting Komentar