Opacity CSS


Properti opacity menentukan transparansi elemen.


Gambar Transparan

Properti opacity mengambil nilai 0,0-1,0. Semakin rendah nilai, semakin transparan: 


img {
  opacity: 0.5;
}

Efek Hover Transparan

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

Forest Mountains Italy 
img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

Penjelasan Contoh

Blok CSS pertama mirip dengan kode pada Contoh 1, kemudian ditambahkan :hover dengan opacity: 1, sehingga saat pengguna mengarahkan kursor ke salah satu gambar, gambar menjadi tidak transparan atau kembali normal.

Dan ketika penunjuk mouse menjauh dari gambar, gambar akan menjadi transparan kembali.

Contoh efek hover terbalik:

Forest Mountains Italy 
img:hover {
  opacity: 0.5;
}

Box Transparan

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

 div {
  opacity: 0.3;
}

Transparansi menggunakan RGBA

Jika tidak ingin menerapkan opacity ke elemen anak, seperti pada contoh di atas, gunakan nilai warna RGBA. Contoh berikut mengatur opacity untuk warna latar belakang dan bukan teks:

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

div {
  background: rgba(48, 63, 159, 0.3) /* Background Biru dengan 30% opacity */
}

Teks dalam Box Transparan

<html>
<head>
<style>
div.background {
  background: url(bunga.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 teks yang ditempatkan di dalam box transparan.</p>
  </div>
</div>

</body>
</html>

Penjelasan Contoh

Pertama, kita membuat elemen <div> (class="background") dengan gambar latar belakang, dan sebuah border.

Kemudian kita membuat <div> lain (class="transbox") di dalam <div> pertama.

<div class="transbox"> memiliki warna latar belakang, dan border - div transparan.

Di dalam <div> transparan, kita menambahkan beberapa teks di dalam elemen <p>.

Komentar

Posting Komentar