Tidadigi Logo

CSS contrast() Function

Hàm contrast() là một hàm dựng sẵn dùng để áp dụng bộ lọc cho ảnh. Nó điều chỉnh độ tương phản của ảnh.

Cú pháp:

contrast( amount )

Tham số: Hàm này chấp nhận một tham số duy nhất là amount. Tham số này giữ giá trị độ tương phản. Giá trị độ tương phản được đặt theo giá trị và phần trăm. Giá trị 0% thể hiện ảnh hoàn toàn xám và 100% thể hiện ảnh gốc.

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

Ví dụ:

html 
<!DOCTYPE html> 
<html> 

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

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

</html>

Đầu ra:

 css-contrast-function 

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi hàm contrast() đượ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