Hướng dẫn how do i change an image from black to white in css? - Làm cách nào để thay đổi hình ảnh từ đen sang trắng trong css?

Làm thế nào để tôi đảo ngược màu của một hình ảnh trong CSS?

CSS | Hàm đảo ngược () hàm đảo ngược () là hàm sẵn được sử dụng để áp dụng bộ lọc cho hình ảnh để đặt đảo ngược màu của hình ảnh mẫu.

Xem thảo luận

Làm thế nào để tôi đảo ngược màu của một hình ảnh trong CSS?

CSS | Hàm đảo ngược () hàm đảo ngược () là hàm sẵn được sử dụng để áp dụng bộ lọc cho hình ảnh để đặt đảo ngược màu của hình ảnh mẫu.

Xem thảo luận

Cải thiện bài viết

Lưu bài viếtgrayscale() method to convert the element colors into black and white. The grayscale 0% indicates the original element and 100% indicate completely grayscale element.  

Đọc

filter: grayscale(100%)

Bàn luận

Cách tiếp cận của bài viết này là thay đổi màu của hình ảnh thành màu đen và trắng bằng cách sử dụng thuộc tính bộ lọc trong CSS. Nó được sử dụng để đặt hiệu ứng hình ảnh của một yếu tố. Thuộc tính này chủ yếu được sử dụng trong nội dung hình ảnh. & nbsp;

Output:

CSS đã đi một chặng đường dài trong vài năm qua. Trong bài viết hôm nay, chúng tôi sẽ xem xét cách chúng ta có thể thêm bộ lọc màu đen và trắng vào giao diện người dùng của mình.

Thuộc tính CSS

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);

Sử dụng bộ lọc CSS thang độ xám

Để sử dụng bộ lọc thang độ xám, bạn gọi hàm là giá trị thuộc tính cho thuộc tính

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);

img {
  filter: grayscale(100%);
}

Các CSS trên sẽ tạo tất cả hình ảnh trên trang của bạn đen và trắng. Bạn có thể điều chỉnh tỷ lệ phần trăm từ 0% đến 100%. Ngoài ra, bạn có thể sử dụng giá trị số nguyên từ 0 đến 1 để biểu thị tỷ lệ phần trăm. Ví dụ sau đây cho thấy cách làm điều đó.

img {
  filter: grayscale(1);
}

Ngoài ra, nếu bạn bỏ qua bất kỳ giá trị nào trong bộ lọc

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);

img {
  filter: grayscale(); /* Same as grayscale(1) */
}

Khá dễ dàng phải không? Bạn có thể áp dụng bộ lọc này cả cho hình ảnh và các yếu tố khác trên trang của bạn, chẳng hạn như Div, SVG, v.v.

Ví dụ hình ảnh màu đen và trắng CSS

Hãy cùng xem bộ lọc này trong hành động. Chúng tôi sẽ sử dụng một hình ảnh từ Unplash của Jeryy Zhang.

Hình ảnh cơ sở

Grayscale (1) a.k.a đen và trắng

Mã của chúng tôi sẽ trông như thế này:

.black-and-white {
  filter: grayscale(); /* Same as grayscale(1) */
}

Grayscale (50%) a.k.a nửa đen và trắng

Mã của chúng tôi sẽ trông như thế này:

.grayscale-50 {
  filter: grayscale(50%);
}

.black-and-white { filter: grayscale(); /* Same as grayscale(1) */ }

Tiếp theo, hãy để Lừa làm như vậy nhưng lần này với một phần tử HTML. Hãy để tạo ra một hộp và cho nó màu đỏ tươi. Mã sẽ trông như thế này:

.box {
  height: 75px;
  width: 100px;
  padding: 25px;
  text-align: center;
  background: magenta;
  color: white;
}

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);

Và kết quả của chúng tôi:

Hello!

Bây giờ, nếu chúng tôi thêm bất kỳ lớp nào ở trên như

filter: progid:DXImageTransform.Microsoft.BasicImage(invert=1);
zoom: 1;

filter: progid:DXImageTransform.Microsoft.BasicImage(invert=1);
zoom: 1;

Đen và trắng

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);

Hello!

Grayscale-50

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);

Hello!

Khá tuyệt phải không? Bộ lọc

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);