Cara membuat background transparan di belakang teks menggunakan CSS dan HTML tanpa opacity

by

Cara membuat background transparan di belakang tulisan menggunakan CSS dan HTML tanpa opacity

Hallo sobat Blogger pada kali ini saya akan sedikit membagikan pengetahuan saya kepada teman teman semua, hari ini saya akan mengajarkan bagaimana Cara membuat background transparan di belakang tulisan menggunakan CSS dan HTML , lah kan tinggal pakai opacity?ya benar opacity bisa mentransparakan gambar teks dan background, namun opacity tidak bisa transparasi pada satu elemen , opacity akan metrnasparasikan semua elemen yang berada pada class tersebut alahasil desain nya pun terkesan jelek, oleh karena itu di sini saya share membuat background transparan di belakang tulisan menggunakan CSS dan HTML tanpa opacity,  seperti  yang ada pada gambar di bawah ini yuk cekidot!

Cara membuat background transparan di belakang teks menggunakan CSS dan HTML tanpa opacity

Yang Harus kalian persiapakan adalah

  •  Teks editor pastinya
  •  Gambar 
  •  Internet

Langkah awal yang harus di lakukan kalian harus paham dasar dasar dari CSS dan HTML, Jika sudah paham maka akan jauh lebih mudah memahami kode yang saya buat, Pertama buatlah Tag HTML seperti ini,

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
</body>
</html>

Lalu di bawah Body Lanjutkan dengan menulis TAG Div, Nah bagi kalian yang belum tahu Tag DIV apa, saya akan sedikit memberi tahu, Jadi tag DIV itu semacam pembungkus, tag div ini nantinya akan membungkus bermacam macam elemen elemen yang nantinya akan menjadi satu kesatuan ,Paham? yuk lanjut…
Lanjut ke langkah berikutnya

<div class=”wrapper”>
  <img src=”https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg”>
  <div class=”lapis”>
    <h1>
      Gambar pemandangan
    </h1>
  </div>
</div>

Sedikit penjelasan pada kode tersebut , div awal saya beri class wrapper, bisa di perhatikan pada layer pertama   <img src=”https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg”>
Kode ini akan menampilkan gambar yang nantinya akan di jadikan background utama, selanjutnya perhatikan  pada div wrapper ada div lapis yang saya buat, keadaan seperti ini dinamakan div didalam div, div lapis ini hanya berisi teks yang nantinya akan tampil pada background, sampai tahap ini bagian HTML selesai, selanjutnya adalah proses mempercantik tampilan agar bisa sperti pada gambar di atas
Setelah </head> atau tepatnya di bawah tag head ketikan <style>taruh kode css di sini </style> di sini saya akan mempermudah dengan menggunakan CSS Internal yaitu kode css yang sisipkan langsung di bawah tag head lalu masukan kode di bawah ini

  .wrapper {
  width: 900px;
  height:auto;
 overflow: hidden;
  position:relative;
}
/* perhatikan div class wrapper saya kasih lebar 900 pixel dan tinggi auto, Lihat pada Properti Position relative , ini akan berguna agar class lapis menyatu dengan class wrapper */
wrapper > img {
  width: 900px;
    z-index:-1;
}
/*kemudian samakan ukuran lebar gambar dengan ukuran lebar div*/
.lapis {
  width:900px;
  height:100px;
  background-color:rgba(0, 0, 0, 0.6);
  position:absolute;
  z-index:9999;
  bottom:5px;
}
/* di sini lah kuncinya pada properti background color saya menggunakan warna dari RGBA yang akan mengubah menjadi transparan*/.
 lapis > h1 {
  margin-left:10px;
  color : white;
}
/* kode ini untuk mengatur teks sesuai keinginan kalian*/

Untuk mencari warna dari RGBA kalian bisa mengunjungi situs https://www.hexcolortool.com , disini kalian bisa eksplorasi warna yang cocok untuk wesbsite kalian

Cara membuat background transparan di belakang teks menggunakan CSS dan HTML tanpa opacity

Oh ya jika kalian ingin full background gelap maka  tinggal atur pada height sesuai selera kalian…
Untuk Lengkapnya seperti ini
Cara membuat background transparan di belakang teks menggunakan CSS dan HTML tanpa opacity

Nah jadi seperti itu gaes,  Kira kira sudah paham belum?kalu belum komen di bawah yah

Leave a Comment