Kecerahan/Keopakan CSS

kepadatan Properti menentukan kecerahan/keopakan elemen.

Gambar transparan

kepadatan Range nilai properti opacity adalah 0.0-1.0. Nilai yang lebih rendah, semakin transparan:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

kepadatan 1

Contoh

img {
  kepadatan: 0.5;
}

Coba sendiri

efek transparan bergerak

kepadatan Properti biasanya digunakan bersamaan :hover Penggunaan pemilih bersama-sama, sehingga dapat mengubah kecerahan saat kursor berada di atas:

Tulip
Tulip
Bunga

Contoh

img {
  kepadatan: 0.5;
}
img:hover {
  opacity: 1.0;
}

Coba sendiri

Pengertian contoh

Blok CSS pertama mirip dengan kode di contoh 1. Selain itu, kami menambahkan efek saat pengguna menaruh kursor di salah satu gambar. Dalam hal ini, saat pengguna menaruh kursor di gambar, kami ingin gambar transparan. Baris CSS ini adalah kepadatan:1;.

Ketika penunjuk mouse meninggalkan gambar, gambar akan kembali transparan.

Contoh efek balik hover:

Tulip
Tulip
Bunga

Contoh

img:hover {
  kepadatan: 0.5;
}

Coba sendiri

kotak transparan

Menggunakan kepadatan Ketika atribut kepadatan digunakan untuk menambahkan kepadatan latarbelakang elemen, semua elemen anak akan mewarisi kepadatan yang sama. Ini mungkin akan membuat teks di dalam elemen yang transparan sulit untuk dibaca:

kepadatan 1
kepadatan 0.6
kepadatan 0.3
kepadatan 0.1

Contoh

div {
  kepadatan: 0.3;
}

Coba sendiri

Menggunakan kepadatan RGBA

Jika Anda tidak ingin menerapkan kepadatan kepada elemen anak, seperti contoh di atas, gunakan nilai warna RGBA. Contoh di bawah ini menetapkan warna latarbelakang daripada kepadatan teks:

100% kepadatan
60% kepadatan
30% kepadatan
10% kepadatan

Anda telah belajar dari Warna CSS Dalam bab ini, kita belajar tentang penggunaan RGB sebagai nilai warna. Selain RGB, nilai warna warna RGB dapat digunakan bersamaan dengan jalur alpha (RGBA) - jalur ini menentukan kepadatan warna.

Nilai warna RGBA ditentukan seperti ini: rgba(merah, hijau, biru, alpha) alpha Parameter adalah angka yang berada di antara 0.0 (sangat transparan) dan 1.0 (sangat tak transparan).

Petunjuk:Anda akan belajar di Warna CSS Dalam bab ini, kita belajar lebih banyak tentang warna RGBA.

Contoh

div {
  latarbelakang: rgba(76, 175, 80, 0.3) /* Kepadatan 30% latarbelakang biru */
}

Coba sendiri

Teks di dalam kotak transparan

Ini adalah beberapa teks yang berada di kotak transparan.

Contoh

<html>
<head>
<style>
div.background {
  latarbelakang: url(klematis.jpg) ulang;
  batas: 2px solid hitam;
}
div.transbox {
  margin: 30px;
  warna-latarbelakang: #ffffff;
  batas: 1px solid hitam;
  kepadatan: 0.6;
}
div.transbox p {
  margin: 5%;
  tebal;
  warna: #000000;
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>Ini adalah beberapa teks yang berada di dalam kotak transparan.</p>
  </div>
</div>
</body>
</html>

Coba sendiri

Pengertian contoh

Pertama, kami membuat elemen <div> dengan gambar latar dan garis batas (class="background").

Lalu, kami membuat <div> lain di dalam pertama <div> (class="transbox").

<div class="transbox"> Memiliki warna latar dan garis batas - div ini adalah transparan.

Dalam <div> yang transparan, kami menambahkan beberapa teks di dalam elemen <p>.