Hàm saturate() trong CSS

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

CSS của saturate() Hàm lọc được sử dụng để điều chỉnh độ饱和 của yếu tố (mức độ mạnh của màu sắc).

  • 0% (hoặc 0) sẽ làm cho yếu tố hoàn toàn mất饱和
  • 100% (hoặc 1) sẽ không có hiệu ứng
  • 200% (hoặc 2) sẽ làm cho yếu tố quá饱和

Mô hình

Ví dụ 1

Đặt độ饱和 khác nhau cho hình ảnh:

#img1 {
  filter: saturate(0);
}
#img2 {
  filter: saturate(100%);
}
#img3 {
  filter: saturate(200%);
}

Thử trực tiếp

Ví dụ 2

sử dụng saturate() 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: saturate(450%);
  backdrop-filter: saturate(450%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Thử trực tiếp

Ngữ pháp CSS

saturate(amount)
Giá trị Mô tả
amount

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

0% (hoặc 0) sẽ làm cho yếu tố hoàn toàn mất饱和.

100% (hoặc 1) sẽ không có hiệu ứng.

Giá trị lớn hơn 100% sẽ cung cấp hiệu ứng quá饱和.

Chi tiết kỹ thuật

Phiên bản: CSS Filter Effects Module Level 1

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn hàm đó.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Trang liên quan

Tham khảo:Thuộc tính filter trong CSS

Tham khảo:Hàm blur() trong CSS

Tham khảo:Hàm brightness() trong CSS

Tham khảo:Hàm contrast() trong CSS

Tham khảo:Hàm drop-shadow() trong CSS

Tham khảo:Hàm grayscale() trong CSS

Tham khảo:Hàm hue-rotate() trong CSS

Tham khảo:Hàm invert() trong CSS

Tham khảo:Hàm opacity() trong CSS

Tham khảo:Hàm sepia() trong CSS