Bằng cách chỉ định giá trị thang độ xám cho thuộc tính bộ lọc của CSS, chúng ta có thể tạo một hình ảnh đen trắng. Thuộc tính bộ lọc có thể được sử dụng để áp dụng các hiệu ứng đặc biệt như làm mờ, đổ bóng cho hình ảnh.
Cú pháp
Cú pháp của thuộc tính bộ lọc CSS như sau -
Selector {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
} Ví dụ
Các ví dụ sau minh họa thuộc tính bộ lọc CSS.
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 2%;
border-radius: 25%;
}
img:nth-of-type(even) {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
<img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
</body>
</html> Điều này cho kết quả sau
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 2%;
}
img:nth-of-type(odd) {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
<img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
</body>
</html> Điều này cho kết quả sau
