Hàm grayscale() CSS

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

CSS của grayscale() Hàm lọc sẽ chuyển hình ảnh thành gray scale.

  • 100% (hoặc 1) sẽ làm cho hình ảnh hoàn toàn chuyển thành gray scale
  • 0% (hoặc 0) sẽ không có hiệu ứng

Thực tế

Ví dụ 1

Đặt giá trị gray scale khác nhau cho hình ảnh:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

Thử ngay

Ví dụ 2

để grayscale() với backdrop-filter Sử dụng kết hợp thuộc tính:

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

Thử ngay

Ngữ pháp CSS

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

Tùy chọn. Định nghĩa giá trị gray scale, có thể là số hoặc phần trăm.

100% (hoặc 1) sẽ làm cho yếu tố hoàn toàn chuyển thành gray scale.

0% (hoặc 0) biểu thị hình ảnh ban đầu (không có hiệu ứng).

Giá trị mặc định là 1.

Chi tiết kỹ thuật

Phiên bản: CSS Filter Effects Module 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ợ hàm này hoàn toàn.

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 blur() CSS

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

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

Tham khảo:Hàm drop-shadow() CSS

Tham khảo:Hàm hue-rotate() CSS

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

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

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

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