Hàm invert

Hàm invert cho phép đảo ngược màu sắc trong hình nền. Giá trị 0 biểu thị hình ảnh giữ nguyên bản gốc. Giá trị 100% hoặc 1 sẽ đảo ngược hoàn toàn màu sắc của nền. Bất kỳ con số nào nằm trong khoảng này sẽ đảo ngược màu sắc một phần. Không thể đặt giá trị âm. Theo mặc định, giá trị là 0.

Cú pháp

bộ chọn {
	filter: invert(số);
}

Ví dụ

Hãy đảo ngược màu sắc của hình ảnh chúng ta tới giá trị 50%:

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

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

Ví dụ

Bây giờ hãy đảo ngược màu sắc của hình ảnh chúng ta tới giá trị 100%:

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

#elem {
	filter: invert(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 trong hàm invert giá trị bằng 0:

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

#elem {
	filter: invert(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 sắc độ cho nền
hàm opacity,
đặt độ trong suốt cho nền
hàm sepia,
chuyển đổi nền thành sepia
thuộc tính background,
là 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 phần tử
thuộc tính filter,
đặt kiểu cho nền