Hàm sepia

Hàm sepia cho phép tạo hiệu ứng sepia cho hình nền - một hình ảnh đen trắng với tông màu nâu. Giá trị 0 biểu thị rằng hình ảnh sẽ giữ nguyên như ban đầu. Giá trị 100% hoặc 1 chuyển đổi hoàn toàn hình nền thành sepia. Bất kỳ số nào nằm trong khoảng này sẽ áp dụng hiệu ứng sepia một cách tuyến tính. Không thể đặt giá trị âm. Theo mặc định, giá trị là 0.

Cú pháp

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

Ví dụ

Hãy biến hình ảnh của chúng ta thành sepia hoàn toàn:

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

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

Ví dụ

Bây giờ hãy giảm mức độ áp dụng sepia xuống 50%:

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

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

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

#elem {
	filter: sepia(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ờ hình nền
hàm brightness,
điều chỉnh độ sáng cho hình nền
hàm contrast,
điều chỉnh độ tương phản cho hình nền
hàm drop-shadow,
thêm bóng đổ cho hình nền
hàm hue-rotate,
xoay màu sắc cho hình nền
hàm invert,
đảo ngược màu sắc của hình nền
hàm opacity,
điều chỉnh độ trong suốt cho hình nền
thuộc tính background,
là thuộc tính viết tắt cho hình nền
thuộc tính background-image,
dùng để đặt hình ảnh nền cho một phần tử
thuộc tính filter,
định kiểu cho hình nền