Hướng dẫn how do you make an image grayscale in css? - làm thế nào để bạn tạo một hình ảnh thang độ xám trong css?

Thí dụ

Thay đổi tất cả hình ảnh thành Đen và Trắng (100% Xám):

img {& nbsp; & nbsp; filter: grayscale (100%);}
  filter: grayscale(100%);
}

Hãy tự mình thử »

Mẹo: Thêm ví dụ "Hãy thử nó" dưới đây. More "Try it Yourself" examples below.

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

Thuộc tính filter xác định các hiệu ứng hình ảnh (như mờ và bão hòa) thành một phần tử (thường là).

Đưa ra bản chạy thử ❯

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Các số theo sau là -webkit- Chỉ định phiên bản đầu tiên hoạt động với tiền tố.

CSS Cú pháp

Bộ lọc: Không có | Blur () | Độ sáng () | độ tương phản () | Drop-Shadow () | thang độ xám () | Hue-rotate () | Đảo ngược () | Độ mờ () | bão hòa () | SEPIA () | url ();

Mẹo: Để sử dụng nhiều bộ lọc, hãy tách từng bộ lọc bằng một không gian (xem "thêm các ví dụ" bên dưới). To use multiple filters, separate each filter with a space (See "More Examples" below).

Chức năng lọc

Lưu ý: Các bộ lọc sử dụng các giá trị phần trăm (nghĩa là 75%), cũng chấp nhận giá trị là thập phân (tức là 0,75). The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

Nhiều ví dụ hơn

Ví dụ mờ

Áp dụng hiệu ứng mờ cho hình ảnh:

img {& nbsp; bộ lọc: blur (5px);}
  filter: blur(5px);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: blur(35px);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: brightness(200%);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: contrast(200%);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: drop-shadow(8px 8px 10px gray);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: grayscale(50%);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: hue-rotate(90deg);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: invert(100%);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: opacity(30%);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: saturate(800%);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: sepia(100%);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: contrast(200%) brightness(150%);
}

Hãy tự mình thử »

Vệ tinh mờ 2

Áp dụng hình nền mờ:

img.background {& nbsp; & nbsp; filter: blur (35px);}
  filter: blur(4px);
}

Ví dụ độ sáng
  filter: brightness(0.30);
}

Điều chỉnh độ sáng của hình ảnh:
  filter: contrast(180%);
}

img {& nbsp; Bộ lọc: Độ sáng (200%);}
  filter: grayscale(100%);
}

Ví dụ tương phản
  filter: hue-rotate(180deg);
}

Điều chỉnh độ tương phản của hình ảnh:
  filter: invert(100%);
}

img {& nbsp; Bộ lọc: Độ tương phản (200%);}
  filter: opacity(50%);
}

Bỏ cái bóng ví dụ
  filter: saturate(7);
}

Áp dụng hiệu ứng bóng cho hình ảnh:
  filter: sepia(100%);
}

img {& nbsp; Bộ lọc: Drop-Shadow (8px 8px 10px xám);}
  filter: drop-shadow(8px 8px 10px green);
}

Hãy tự mình thử »

Ví dụ về thang độ xám

Chuyển đổi hình ảnh thành thang độ xám:

img {& nbsp; Bộ lọc: thang độ xám (50%);}