Opacity Atau Transparansi Dengan CSS

Properti opacity menentukan opacity/transparency suatu elemen.

Gambar Transparan

Properti opacity pada CSS dapat mengambil nilai dari 0,0 – 1,0. Semakin rendah nilainya, maka hasilnya semakin transparan:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Transparansi Gambar</h1>
<p>Properti opacity menentukan transparansi elemen. Semakin rendah nilainya, semakin transparan.</p>

<p>Gambar dengan opacity 50%:</p>
<img src="img_forest.jpeg" alt="Hutan" width="170" height="100">

</body></html>

Jalankan Contoh

Efek Hover Transparan

Properti opacity pada CSS sering digunakan bersama dengan selector :hover untuk mengubah opacity pada mouse-over:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<h1>Transparansi Gambar</h1>
<p>Properti opacity sering digunakan bersama dengan selector hover untuk mengubah transparansi pada saat mouse-over.</p>
<img src="img_forest.jpeg" alt="Hutan" width="170" height="100">
<img src="img_mountains.jpeg" alt="Pegunungan" width="170" height="100">
<img src="img_5terre.jpeg" alt="Italia" width="170" height="100">

</body></html>

Jalankan Contoh

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Transparansi Gambar</h1>
<p>Properti opacity sering digunakan bersama dengan selector hover untuk mengubah transparansi pada saat mouse-over.</p>
<img src="img_forest.jpeg" alt="Hutan" width="170" height="100">
<img src="img_mountains.jpeg" alt="Pegunungan" width="170" height="100">
<img src="img_5terre.jpeg" alt="Italia" width="170" height="100">

</body></html>

Jalankan Contoh

Kotak Transparan

Saat menggunakan properti opacity untuk menambahkan transparansi ke latar belakang suatu elemen, semua elemen turunannya mewarisi transparansi yang sama. Hal ini dapat membuat tulisan di dalam elemen yang sepenuhnya transparan sulit dibaca:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Kotak Transparan</h1>
<p>Saat menggunakan properti opacity untuk menambahkan transparansi ke latar belakang suatu elemen, semua elemen turunannya mewarisi transparansi yang sama. Hal ini dapat membuat tulisan di dalam elemen yang sepenuhnya transparan sulit dibaca.</p>

<div class="pertama"><p>opasitas 0,1</p></div>
<div class="kedua"><p>opasitas 0,3</p></div>
<div class="ketiga"><p>opasitas 0,6</p></div>
<div><p>opasitas 1 (default)</p></div>

</body></html>

Jalankan Contoh

Transparansi Menggunakan RGBA

Jika tidak ingin menerapkan opasitas ke elemen turunan, seperti dalam contoh sebelumnya, gunakan nilai warna RGBA. Contoh berikut mengatur opacity untuk warna latar belakang dan bukan warna tulisan:

Nilai warna RGBA ditentukan dengan: rgba(red, green, blue, alpha). Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya buram).

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(76, 175, 80);
  padding: 10px;
}

div.first {
  background: rgba(76, 175, 80, 0.1);
}

div.second {
  background: rgba(76, 175, 80, 0.3);
}

div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>

<h1>Kotak Transparan</h1>
<p>Dengan properti opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opasitas 1</p></div>

<p>Dengan nilai warna RGBA:</p>
<div class="first"><p>transparansi 10%</p></div>
<div class="second"><p>transparansi 30%</p></div>
<div class="third"><p>transparansi 60%</p></div>
<div><p>default</p></div>

<p>Perhatikan bagaimana teks dan warna latar belakang sama-sama menjadi transparan menggunakan properti opacity.</p>

</body></html>

Jalankan Contoh

Tulisan Dalam Kotak Transparan

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p>Ini adalah beberapa teks yang ditempatkan di kotak transparan.</p>
</div>
</div>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : CSS Pseudo-Class
Tutorial setelahnya : Membuat Bar Navigasi Dengan CSS
Semua Tutorial CSS : Tutorial CSS