Tidadigi Logo

CSS invert() Function

Hàm invert() là một hàm dựng sẵn dùng để áp dụng bộ lọc ảnh. Nó đảo ngược màu sắc của ảnh mẫu.

Cú pháp:

invert( amount )

Tham số: Hàm này chấp nhận một tham số duy nhất là amount. Amount xác định mức độ chuyển đổi màu sắc cần đảo ngược. Giá trị của invert được đặt theo giá trị hoặc phần trăm. Giá trị 0% thể hiện ảnh gốc và 100% là ảnh đảo ngược hoàn toàn. Hàm invert() sử dụng công thức sau để tính toán đảo ngược ảnh:

amount * (255 - value) + (1 - amount) * value

Mức độ đảo ngược được kiểm soát bởi biến amount. Biến value nằm trong khoảng 0 - 1 (số thực). Việc này được thực hiện bằng cách chuyển đổi phần trăm đảo ngược màu thành giá trị từ 0-1. Value là giá trị màu của pixel. (255-value) cho ra màu sau khi trừ giá trị màu với giá trị pixel tối đa. Giả sử giá trị của pixel nằm trong khoảng 0 - 255. Không gian mẫu ảnh đầu vào có thể được kéo giãn/thu nhỏ để đáp ứng tiêu chí này. Dưới đây là bảng chứa danh sách phần trăm đảo ngược và kết quả tương ứng.

Inversion Result
0% Original Image
50% Image with each pixel having grey color
100% Completely inverted Image

Ví dụ dưới đây minh họa hàm CSS invert() trong CSS:

Ví dụ:

html 
<!DOCTYPE html> 
<html> 

<head> 
    <title>CSS invert() Function</title> 
    
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
        .invert_effect {
            filter: invert(100%);
        }
    </style>
</head> 

<body> 
    <h1>GeeksforGeeks</h1> 
    
    <h2>CSS invert() function</h2>
    
    <img class="invert_effect" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"> 
</body> 

</html>

Output:

css-invert-function

Supported Browsers: Các trình duyệt được hỗ trợ bởi hàm invert() được liệt kê dưới đây:

  • Google Chrome 18 trở lên
  • Edge 12 trở lên
  • Internet Explorer không được hỗ trợ
  • Firefox 35 trở lên
  • Safari 6 trở lên
  • Opera 15 trở lên

Last Updated : 21/07/2025