Hàm opacity

Hàm opacity cho phép thay đổi độ trong suốt của hình nền. Giá trị 100% hoặc 1 giữ nguyên độ trong suốt ban đầu của hình ảnh. Giá trị 0 có nghĩa là hình ảnh sẽ trở nên hoàn toàn trong suốt. Bất kỳ con số nào nằm trong phạm vi này sẽ đặt độ trong suốt một phần cho nền. Không thể đặt giá trị âm. Theo mặc định, giá trị là 1.

Cú pháp

selector {
	filter: opacity(số);
}

Ví dụ

Hãy đặt độ trong suốt cho hình ảnh của chúng ta là 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;
}

Ví dụ

Bây giờ hãy đặt độ trong suốt là 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;
}

Ví dụ

Bây giờ hãy đặt giá trị trong hàm opacity bằng 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;
}

Xem thêm

hàm blur,
làm mờ nền
hàm brightness,
đặt độ sáng cho nền
hàm contrast,
đặt độ tương phản cho nền
hàm drop-shadow,
đặt bóng đổ cho nền
hàm hue-rotate,
đặt màu sắc cho nền
hàm invert,
đảo ngược màu sắc của nền
hàm sepia,
chuyển đổi nền thành sepia
thuộc tính background,
là một thuộc tính viết tắt cho nền
thuộc tính background-image,
dùng để đặt hình nền cho một khối