Tidadigi Logo

CSS grayscale() Function

Trong CSS, grayscale() là một hàm dựng sẵn dùng để áp dụng bộ lọc sắc thái xám. Hàm này dùng để thiết lập sắc thái xám cho hình ảnh.

Cú pháp:

grayscale( 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ị sắc thái xám cần áp dụng. Giá trị của sắc thái xám được đặt theo số hoặc phần trăm. Giá trị 0% thể hiện hình ảnh gốc. Giá trị từ 0% đến 100% đại diện cho hệ số nhân tuyến tính.


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

HTML 
<!DOCTYPE html>
<html>

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

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

</html>

Đầu ra:

css-grayscale-function

Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ hàm grayscale() được liệt kê dưới đây:

  • Google Chrome 18.0
  • Microsoft Edge 12.0
  • Firefox 35.0
  • Safari 6.0
  • Opera 15.0

Last Updated : 21/07/2025