Home
Ilmu Komputer
Software
Hardware
Jaringan Komputer
Kuliah IT
ViTu IT

Home
Ilmu Komputer
Software
Hardware
Jaringan Komputer
Kuliah IT
ViTu IT

Home » How To » Cara Membuat Teks Transparan Pada Gambar(Image with Transparent Text)

Cara Membuat Teks Transparan Pada Gambar(Image with Transparent Text)

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 27, 2021

Di bawah ini kita akan membuat gambar dengan teks latar belakang transparan (tembus pandang), menggunakan CSS.

Teks Gambar Transparan

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  font-size: 17px;
}

.container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.container img {vertical-align: middle;}

.container .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Warna cadangan */
  background: rgba(0, 0, 0, 0.5); /* Latar belakang hitam dengan opasitas 0,5 */
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
</style>
</head>
<body>

<h2>Responsive Image with Transparent Text</h2>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Kimi No Nawa</h1>
    <p>Kimi no Nawa menceritakan tentang dua remaja yang bernama Mitsuha Miyamizu dan Taki Tachibana yang saling bertukar tubuh satu sama lain. Awalnya mereka tidak menyadari pertukaran tubuh itu, mereka menganggapnya hanya mimpi semata.</p>

<p>Tetapi orang-orang sekitar mengatakan kepada keduanya mengenai keanehan di diri mereka, belum lagi kejadiannya terjadi lebih dari 3 kali. Sehingga mau tidak mau mereka pun percaya.
<br> Bagaimanakah Kelanjutan Ceritanya? Tonton saja :)
</p>
  </div>
</div>

</body>
</html>

Cara Membuat Teks Gambar Transparan

Langkah 1) Tambahkan HTML:
Contoh

<div class="container">
  <img  src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Anime</h1>
    <p>Kimi No Nawa </p>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

.container {
  position: relative;
  max-width: 800px; /* Lebar maksimal */
  margin: 0 auto; /* Pusatkan  */
}

.container .content {
  position: absolute; /* Posisikan teks latar belakang */
  bottom: 0; /* Di dasar. Gunakan top: 0 untuk menambahkannya ke atas */
  background: rgb(0, 0, 0); /* Warna cadangan*/
  background: rgba(0, 0, 0, 0.5); /* Latar belakang hitam dengan opasitas 0,5 */
  color: #f1f1f1; /* Teks abu-abu */
  width: 100%; /* Lebar penuh */
  padding: 20px; /* padding */
}