Fungsi opacity

Fungsi opacity membolehkan anda mengubah ketelusan imej latar belakang. Nilai 100% atau 1 meninggalkan ketelusan asal imej. Nilai 0 menandakan imej akan menjadi lut sinar sepenuhnya. Mana-mana nombor yang terletak dalam julat ini menetapkan ketelusan separa latar belakang. Nilai negatif tidak boleh ditetapkan. Secara lalai, nilai ialah 1.

Sintaks

selector {
	filter: opacity(nombor);
}

Contoh

Mari kita tetapkan ketelusan imej kita kepada 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

Sekarang mari kita tetapkan ketelusan kepada 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

Sekarang mari kita tetapkan dalam fungsi opacity nilai sama dengan 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 menetapkan kecerahan latar belakang
fungsi contrast,
yang menetapkan kontras latar belakang
fungsi drop-shadow,
yang menetapkan bayangan kepada latar belakang
fungsi hue-rotate,
yang menetapkan kewarnaan latar belakang
fungsi invert,
yang menyongsangkan warna latar belakang
fungsi sepia,
yang mengubah latar belakang kepada sepia
sifat background,
yang merupakan sifat singkatan untuk latar belakang
sifat background-image,
yang boleh digunakan untuk menetapkan imej latar belakang kepada blok