Fungsi CSS opacity()

Definisi dan penggunaan

CSS opacity() Fungsi penyaringan digunakan untuk menerapkan efek transparansi pada elemen.

  • 100% (atau 1) tidak ada efek
  • 50% (atau 0.5) akan membuat elemen menjadi 50% transparan
  • 0% (atau 0) akan membuat elemen sepenuhnya transparan

Contoh

Contoh 1

Atur kelembapan gambar yang berbeda:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

Coba sendiri

Contoh 2

untuk opacity() dengan backdrop-filter Gunakan atribut bersamaan:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: opacity(50%);
  backdrop-filter: opacity(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Coba sendiri

Sintaks CSS

opacity(amount)
Nilai Deskripsi
amount

Pilihan. Tentukan nilai transparensi numerik atau persen. 0% (atau 0) akan membuat elemen sepenuhnya transparan.

100% (atau 1) menunjukkan gambar asli (tanpa efek). Nilai default adalah 1.

Detil teknis

Versi: Modul efek penyaringan CSS Level 1

Dukungan Browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini penuh.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Halaman yang berhubungan

Referensi：Atribut filter CSS

Referensi：Fungsi CSS blur()

Referensi：Fungsi CSS brightness()

Referensi：Fungsi CSS contrast()

Referensi：Fungsi CSS drop-shadow()

Referensi：Fungsi CSS grayscale()

Referensi：Fungsi CSS hue-rotate()

Referensi：Fungsi CSS invert()

Referensi：Fungsi saturate() CSS

Referensi：Fungsi sepia() CSS