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

cssbộ 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:

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

css#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%:

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

css#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:

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

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

Результат:

Xem thêm