Hàm số invert() trong CSS

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

CSS invert() Hàm số lọc được sử dụng để ngược lại màu của hình ảnh.

  • 100% (1) sẽ làm cho hình ảnh hoàn toàn ngược lại
  • 0% (0) sẽ không có bất kỳ hiệu ứng nào

Mô hình

Ví dụ 1

Ngược lại màu của hình ảnh:

#img1 {
  filter: invert(0.3);
}
#img2 {
  filter: invert(70%);
}
#img3 {
  filter: invert(100%);
}

Thử ngay

Ví dụ 2

sẽ invert() với backdrop-filter Sử dụng cùng nhau:

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

Thử ngay

Ngữ pháp CSS

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

Tùy chọn. Định nghĩa mức độ ngược lại, có thể là số hoặc phần trăm.

100% (1) sẽ làm cho phần tử hoàn toàn ngược lại, 0% (0) biểu thị hình ảnh ban đầu (không có hiệu ứng).

Giá trị mặc định là 0。

Chi tiết kỹ thuật

Phiên bản: Module CSS Filter Effects 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ợ đầy đủ hàm số này.

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ố contrast() 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ố opacity() trong CSS

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

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