Hình ảnh CSS đen trắng

Số tiền chuyển đổi, được chỉ định là

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */
grayscale(100%)  /* Completely grayscale */

8 hoặc

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */
grayscale(100%)  /* Completely grayscale */

9. Giá trị của

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

0 là thang độ xám hoàn toàn, trong khi giá trị của

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

1 khiến đầu vào không thay đổi. Các giá trị giữa

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

1 và

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

0 là hệ số nhân tuyến tính đối với hiệu ứng. Giá trị mặc định khi bỏ qua là

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */
grayscale(100%)  /* Completely grayscale */

1. Giá trị ban đầu cho phép nội suy là

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */
grayscale(100%)  /* Completely grayscale */

2

CSS3 có một số tính năng thực sự tuyệt vời, tiện lợi. Một điều mà bạn có thể biết hoặc chưa biết là bạn có thể chuyển đổi hình ảnh thành đen trắng chỉ bằng CSS. Điều này thật tuyệt khi bạn không muốn/cần chỉnh sửa ảnh gốc

Đây là cách thực hiện

CSS

HTML hình ảnh

Điều này sẽ hoạt động trong tất cả các trình duyệt hiện đại. Nhưng để tương thích với các phiên bản Internet Explorer 6-9, bạn sẽ cần thêm những thứ sau

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 đen trắng bằng cách sử dụng thuộc tính bộ lọc trong CSS. Nó được sử dụng để thiết lập hiệu ứng hình ảnh của một phần tử. Thuộc tính này chủ yếu được sử dụng trong nội dung hình ảnh.  

Về cơ bản, chúng tôi sử dụng phương thức thang độ xám () để chuyển đổi màu của phần tử thành đen và trắng. Thang độ xám 0% biểu thị phần tử gốc và 100% biểu thị phần tử thang độ xám hoàn toàn.  

chế độ hòa trộn nền cho phép bạn nhận được một số hiệu ứng thú vị và một trong số đó là chuyển đổi thang độ xám

Giá trị độ sáng , được đặt trên nền trắng, cho phép nó. (di chuột để xem màu xám)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

Độ sáng được lấy từ hình ảnh, màu sắc được lấy từ nền. Vì nó luôn trắng nên không có màu

Nhưng nó cho phép nhiều hơn nữa

Bạn có thể làm động cài đặt hiệu ứng 3 lớp. Cái đầu tiên sẽ là hình ảnh và cái thứ hai sẽ là một gradient trắng đen. Nếu bạn áp dụng chế độ hòa trộn nhiều lần trên phần này, bạn sẽ nhận được kết quả màu trắng như trước trên phần màu trắng, nhưng hình ảnh gốc trên phần màu đen (nhân với màu trắng cho màu trắng, nhân với màu đen không có tác dụng. )

Trên phần màu trắng của gradient, bạn sẽ có được hiệu ứng như trước. Trên phần màu đen của dải màu, bạn đang trộn hình ảnh lên chính nó và kết quả là hình ảnh không bị biến dạng

Bây giờ, tất cả những gì cần thiết là di chuyển gradient để có được hiệu ứng động này. (di chuột để xem màu)

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

Thuộc tính CSS

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

4 cho phép bạn áp dụng nhiều hiệu ứng đồ họa cho phần đánh dấu HTML của mình bao gồm hình ảnh, div và các thành phần khác. Bộ lọc

img {
  filter: grayscale(1);
}

0 cho phép bạn chuyển đổi hình ảnh thành nhiều sắc độ xám khác nhau, bao gồm cả đen và trắng

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 dưới dạng giá trị thuộc tính cho thuộc tính

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

4 của mình như vậy

img {
  filter: grayscale(100%);
}

CSS ở trên sẽ biến tất cả hình ảnh trên trang của bạn thành đen trắng. Bạn có thể tinh chỉnh tỷ lệ phần trăm từ 0% đến 100%. Ngoài ra, bạn cũng có thể sử dụng một 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 thực hiện đ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

img {
  filter: grayscale(1);
}

0, kết quả sẽ tương đương với việc đặt nó thành 1 hoặc 100%

________số 8

Khá dễ dàng phải không?

Ví dụ hình ảnh đen trắng CSS

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

Hình ảnh cơ sở

Thang độ xám(1) a. k. một màu đ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) */
}

Thang độ xám(50%) a. k. một nửa đen trắng

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

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */
grayscale(100%)  /* Completely grayscale */

0

Ví dụ HTML đen trắng CSS

Tiếp theo, hãy làm tương tự nhưng lần này với phần tử html. Hãy tạo một hộp và tô màu đỏ tươi cho nó. Mã sẽ trông như thế này

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */
grayscale(100%)  /* Completely grayscale */

1

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */
grayscale(100%)  /* Completely grayscale */

2

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

Xin chào

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

img {
  filter: grayscale(1);
}

3 hoặc

img {
  filter: grayscale(1);
}

4, chúng ta sẽ thấy các thay đổi được áp dụng giống như chúng đối với hình ảnh

Đen và trắng

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */
grayscale(100%)  /* Completely grayscale */

5

Xin chào

thang độ xám-50

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */
grayscale(100%)  /* Completely grayscale */

6

Xin chào

Khá mát mẻ phải không?