Cara Menampilkan Teks di Atas Gambar
Apakah ada yang telah tau bagaimana cara membuatnya, jikalau telah ada mari kita bantu yang belum tau, hehe oke seketika saja kali ini kita akan belajar cara menampilkan teks di atas gambar, hayo menggunakan apa, ya betul sekali kita akan membutuhkan bantuan CSS ya teman-teman, dengan bantuan CSS yaitu property posistion relative dan position absolute, dengan property itu kita akan dapat membangun teks di atas gambar ya teman-teman. oke bagaimana cara menampilkan teks di atas gambar, simak terus ya teman-teman.
Seperti yang tulis di atas cara menampilkan teks di atas gambar butuh position relative dan position absolute ya teman-teman, disini saya tak akan membahas detial pengertian position relative dan position absolute, karena disini saya akan membahas seketika bagaimana cara menampilkan teks di atas gambar secara seketika.
Dan perlu teman-teman perhatikan ketika kita menggunakan absolute kita pun butuh property lain yaitu left dan top, karena jikalau kita tak memberi left dan top teks tersebut mau di posisikan sebelah mana demikian itu ya teman-teman. Lalu apakah mesti left dan top ya jelas tak ya teman-teman, teman-teman pun dapat menggunakan right dan bottom pun dapat. Oke seketika, saja disini saya mempunyai gambar seperti ini ya teman-teman:
teman-teman jikalau mau sama dapat ambil saja gambar seperti di atas, jikalau telah kita masuk pada contoh pembuatannya.
<!DOCTYPE html>
<html>
<head>
<title>Cara Menampilkan teks di atas gambar </title>
<style-e- type=text/css>
body{
background-color: #666;
}
.container{
width: 800px;
margin: auto;
}
.pembungkus{
position: relative;
}
img {
border: 5px dotted aqua;
}
h1{
color: white;
}
h2{
position: absolute;
left: 40px;
top: 120px;
color: red;
}
h3{
position: absolute;
left: 40px;
top: 150px;
color: yellow;
}
h4{
position: absolute;
left: 40px;
top: 170px;
color: magenta;
}
</style-e->
</head>
<body>
<div class=container>
<h1>Cara Menampilkan teks di atas gambar</h1>
<div class=pembungkus>
<img src=september/belajar-html-itu-mudah.jpg>
<h2>itu asik loh</h2>
<h3>coba saja</h3>
<h4>kalau tak percaya ya telah</h4>
</div>
</div>
</body>
</html>
Tolong bagi kode di atas teman-teman hilangkan -e- yang terdapat di tag <style> ya teman-teman karena jikalau saya tak beri seperti itu atau saya membangun seketika tag <style> akan acak-acakan hasilnya. Bagimana hasilnya:
Sebelum di Style:
Setelah di Style:
Bagimana teman-teman benar-benar menarik ya bagi di coba saya rasa lumayan demikianlah dulu belajar kita mengenai cara menampilkan teks di atas gambar, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
