Hàm số contrast() trong CSS

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

CSS contrast() Hàm số lọc được sử dụng để điều chỉnh cường độ tương phản của phần tử.

  • 0% sẽ làm cho hình ảnh hoàn toàn chuyển thành màu xám
  • 100% (hoặc 1) là giá trị mặc định, biểu thị hình ảnh gốc
  • Giá trị trên 100% sẽ tăng cường độ tương phản
  • Giá trị dưới 100% sẽ giảm cường độ tương phản

Mô hình

Ví dụ 1

Tăng và giảm cường độ tương phản của hình ảnh:

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

Thử ngay

Ví dụ 2

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

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

Thử ngay

Ngữ pháp CSS

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

Tùy chọn. Định nghĩa giá trị tương phản, có thể là số hoặc phần trăm.

0% sẽ làm cho phần tử hoàn toàn chuyển thành màu xám.

100% (hoặc 1) là giá trị mặc định, biểu thị hình ảnh gốc (không có hiệu ứng).

Giá trị trên 100% sẽ tăng cường độ tương phản, giá trị dưới 100% sẽ giảm cường độ tương phản.

Chi tiết kỹ thuật

Phiên bản: Module hiệu ứng lọc CSS cấp độ 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ợ hàm số này hoàn toàn.

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 số blur() trong CSS

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

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

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

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

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

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

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

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