grayscale()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
Hàm grayscale() CSS chuyển đổi ảnh đầu vào sang thang màu xám. Kết quả của nó là một <filter-function>.
Try it
filter: grayscale(0);
filter: grayscale(0.2);
filter: grayscale(60%);
filter: grayscale(1);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Cú pháp
css
grayscale(amount)
Tham số
amountOptional-
Mức độ chuyển đổi ảnh đầu vào sang thang màu xám. Được chỉ định là
<number>hoặc<percentage>. Giá trị100%chuyển hoàn toàn ảnh đầu vào sang thang màu xám, trong khi giá trị0%giữ nguyên ảnh đầu vào. Các giá trị từ0%đến100%có hệ số nhân tuyến tính cho hiệu ứng. Giá trị khởi tạo cho interpolation là0. Giá trị mặc định là1.
Cú pháp chính thức
<grayscale()> =
grayscale( [ <number> | <percentage> ]? )
Ví dụ
Ví dụ về các giá trị đúng cho grayscale()
css
grayscale(0) /* Không có hiệu ứng */
grayscale(.7) /* Thang màu xám 70% */
grayscale() /* Hoàn toàn thang màu xám */
grayscale(1)
grayscale(100%)
Thông số kỹ thuật
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-grayscale |
Khả năng tương thích trình duyệt
Xem thêm
Các hàm <filter-function> khác có thể dùng trong giá trị của các thuộc tính filter và backdrop-filter: