Properti opacity digunakan untuk menentukan opacity / transparansi dari sebuah elemen.
Section Artikel
Gambar Transparan
Properti opacity dapat mengambil nilai dari 0,0 – 1,0. Semakin rendah nilainya, semakin transparan gambarnya seperti berikut :
Contoh :
img {
opacity: 0.5;
}Efek Hover Transparan
Properti opacity sering digunakan bersama dengan selector :hover untuk mengubah opacity pada mouse-over:
Contoh :
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Penjelasan Kode :
Blok CSS pertama mirip dengan kode di contoh 1. Selanjutnya Blok CSS di bawahnya merupakan tambahan kode yang terjadi ketika user mengarahkan kursor ke salah satu gambar. Dalam hal ini kita ingin gambar TIDAK transparan saat user mengarahkan kursor ke gambar. CSS untuk ini adalah opacity:1;.
Saat kursor mouse menjauh dari gambar, gambar akan menjadi transparan kembali.
Contoh kode efek hover terbalik:
img:hover {
opacity: 0.5;
}Kotak Transparan
Saat menggunakan properti opacity untuk menambahkan transparansi ke latar belakang sebuah elemen, semua elemen turunannya mewarisi transparansi yang sama. Hal ini dapat membuat teks di dalam elemen sepenuhnya sulit dibaca:
Contoh :
div { opacity: 0.3; }
<!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>Contoh kotak transparan:</p> <div class="first"><p>opacity 0.1</p></div> <div class="second"><p>opacity 0.3</p></div> <div class="third"><p>opacity 0.6</p></div> <div><p>opacity 1 (default)</p></div> </body> </html>
Transparansi menggunakan RGBA
Jika kita tidak ingin menerapkan opacity ke elemen turunannya, seperti dalam contoh di atas, gunakan nilai warna RGBA.
Kita bisa menggunakan RGB sebagai nilai warna. Selain RGB, kita juga dapat menggunakan nilai warna RGB dengan saluran alfa (RGBA) – yang menentukan opasitas suatu warna.
Nilai warna RGBA ditentukan dengan: rgba (merah, hijau, biru, alfa). Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya tidak tembus pandang).
Contoh :
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}<!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 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>opacity 1</p></div>
<p>RGBA:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>Perhatikan bagaimana teks menjadi transparan serta warna latar belakang saat menggunakan properti opacity.</p>
</body>
</html>
Teks dalam Kotak Transparan
<!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> Contoh Teks dalam kotak transparan.</p>
</div>
</div>
</body>
</html>
Penjelasan Kode :
Pertama, kita membuat <div> elemen (class = “background”) dengan gambar latar belakang dan border.
Kemudian kita membuat <div> (class = “transbox”) lainnya di dalam <div> yang pertama.
<div class=”transbox”> memiliki warna latar belakang, dan border -div transparan.
Di dalam <div> transparan kita bisa menambahkan beberapa teks dalam elemen <p>.
.
