Fungsi opacity

Fungsi opacity memungkinkan Anda mengubah transparansi gambar latar belakang. Nilai 100% atau 1 membuat gambar tetap memiliki transparansi aslinya. Nilai 0 menandakan bahwa gambar akan menjadi sepenuhnya transparan. Angka apa pun yang berada dalam rentang ini mengatur transparansi parsial untuk latar belakang. Nilai negatif tidak dapat ditetapkan. Secara default, nilainya adalah 1.

Sintaks

selektor {
	filter: opacity(angka);
}

Contoh

Mari kita atur transparansi gambar kita menjadi 50%:

<div id="elem"></div>

#elem {
	filter: opacity(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Dan sekarang mari kita atur transparansi menjadi 100%:

<div id="elem"></div>

#elem {
	filter: opacity(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Dan sekarang mari kita tetapkan dalam fungsi opacity nilai sebesar 0:

<div id="elem"></div>

#elem {
	filter: opacity(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Lihat juga

fungsi blur,
yang mengaburkan latar belakang
fungsi brightness,
yang mengatur kecerahan latar belakang
fungsi contrast,
yang mengatur kontras latar belakang
fungsi drop-shadow,
yang mengatur bayangan untuk latar belakang
fungsi hue-rotate,
yang mengatur rona warna untuk latar belakang
fungsi invert,
yang membalikkan warna latar belakang
fungsi sepia,
yang mengubah latar belakang menjadi sepia
properti background,
yang merupakan properti singkatan untuk latar belakang
properti background-image,
yang dapat digunakan untuk menetapkan gambar latar belakang ke sebuah blok