Hàm số sepia() trong CSS

Trang trước Hàm scaleY() CSS
Trang tiếp theo Hàm sin() CSS
Quay lại lớp trên Sách tham khảo hàm CSS

Định nghĩa và cách sử dụng

CSS sepia() Hàm số lọc sẽ chuyển đổi hình ảnh thành nâu sẫm（một màu ấm hơn, nâu/xanh ngà）.

100%（hoặc 1）sẽ làm cho hình ảnh hoàn toàn trở thành nâu sẫm
0%（hoặc 0）sẽ không có hiệu ứng

Mô hình

Ví dụ 1

Đặt hiệu ứng nâu sẫm khác nhau cho hình ảnh:

#img1 {
  filter: sepia(1);
}
#img2 {
  filter: sepia(60%);
}
#img3 {
  filter: sepia(0.4);
}

Thử ngay

Ví dụ 2

sử dụng sepia() với backdrop-filter Sử dụng kết hợp thuộc tính:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: sepia(100%);
  backdrop-filter: sepia(100%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Thử ngay

Ngữ pháp CSS

sepia(amount)

Giá trị	Mô tả
amount	Tùy chọn. Định nghĩa giá trị nâu sẫm, có thể là số hoặc phần trăm. 100%（hoặc 1）sẽ làm cho yếu tố hoàn toàn trở thành nâu sẫm. 0%（hoặc 0）chỉ ra hình ảnh gốc（không có hiệu ứng）。Giá trị mặc định là 0。

Giá trị

Mô tả

amount

Tùy chọn. Định nghĩa giá trị nâu sẫm, có thể là số hoặc phần trăm.

100%（hoặc 1）sẽ làm cho yếu tố hoàn toàn trở thành nâu sẫm.

0%（hoặc 0）chỉ ra hình ảnh gốc（không có hiệu ứng）。Giá trị mặc định là 0。