Hướng dẫn convert black image to white css - chuyển đổi ảnh đen sang css trắng

20

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi có một hình ảnh đen trắng và tôi chỉ cần nghịch đảo (đen thay vì trắng và trắng thay vì màu đen) của hình ảnh đó. Tôi biết rằng nó có thể được thực hiện với các biên tập viên hình ảnh, có khả năng đối phó với CSS không? Có bất kỳ thuộc tính CSS nào có sẵn để đảo ngược hình ảnh đen trắng không?

Hỏi ngày 19 tháng 8 năm 2016 lúc 8:33Aug 19, 2016 at 8:33

0

Bạn có thuộc tính filter:

.yourImage{
    -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
}

Điều này sẽ đảo ngược các màu trái ngược với việc làm cho hình ảnh đen trắng.

Đã trả lời ngày 19 tháng 8 năm 2016 lúc 8:35Aug 19, 2016 at 8:35

Reece Kenneyreece KenneyReece Kenney

2.5343 huy hiệu vàng22 Huy hiệu bạc57 Huy hiệu đồng3 gold badges22 silver badges57 bronze badges

Bạn có thể sử dụng bộ lọc:

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

Hoặc chỉ sử dụng invert(1) thay vì grayscale(1) invert(1) nếu bạn có hình ảnh đen trắng.

Bạn cũng có thể sử dụng Bộ lọc đảo ngược cho IE như thế này:

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

Để biết thêm khả năng tương thích của trình duyệt, hãy xem plugin chính hoặc jQuery.blackandwhite này.

Đã trả lời ngày 19 tháng 8 năm 2016 lúc 8:35Aug 19, 2016 at 8:35

.Blur {& nbsp; & nbsp; filter: blur (4px);}

.Brightness {& nbsp; Bộ lọc: Độ sáng (0,30);}

.Contrast {& nbsp; Bộ lọc: Độ tương phản (180%);}

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

grayscale(100%)

.huerotate {& nbsp; Bộ lọc: Hue-ROTATE (180deg);}

Ví dụ tương phản

Điều chỉnh độ tương phản của hình ảnh:

img {& nbsp; Bộ lọc: Độ tương phản (200%);}
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

Hãy tự mình thử »

Bỏ cái bóng ví dụ

Áp dụng hiệu ứng bóng cho hình ảnh:

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

Bỏ cái bóng ví dụ

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

Ví dụ mờ

Áp dụng hiệu ứng mờ cho hình ảnh: More "Try it Yourself" examples below.

img {& nbsp; bộ lọc: 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);}

Ví dụ độ sáng

Bỏ cái bóng ví dụ

Áp dụng hiệu ứng bóng cho hình ảnh:

img {& nbsp; Bộ lọc: Drop-Shadow (8px 8px 10px xám);} 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).

Điều chỉnh độ tương phản của hình ảnh.

0% sẽ làm cho hình ảnh hoàn toàn màu đen.100% (1) là mặc định và biểu thị hình ảnh gốc. Giá trị trên 100% sẽ cung cấp kết quả với độ tương phản nhiều hơn.

Drop-Shadow (H-Shadow V-Shadow Blur màu)

Áp dụng hiệu ứng bóng rơi cho hình ảnh.
  filter: blur(5px);
}

Giá trị có thể: H -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng ngang. Các giá trị âm đặt bóng ở bên trái của hình ảnh.

V -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng dọc. Giá trị âm đặt bóng trên hình ảnh.

Blur - Tùy chọn. Đây là giá trị thứ ba, và phải có trong pixel. Thêm một hiệu ứng mờ cho bóng. Một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn (bóng trở nên lớn hơn và nhẹ hơn). Giá trị âm không được phép. Nếu không có giá trị được chỉ định, 0 được sử dụng (cạnh của bóng rất sắc nét).

lan truyền - tùy chọn. Đây là giá trị thứ tư, và phải có trong pixel. Các giá trị tích cực sẽ khiến bóng tối mở rộng và phát triển lớn hơn, và các giá trị âm sẽ khiến bóng tối bị thu hẹp. Nếu không được chỉ định, nó sẽ là 0 (bóng sẽ có cùng kích thước với phần tử). Lưu ý: Chrome, Safari và Opera, và có thể các trình duyệt khác, không hỗ trợ độ dài thứ 4 này; Nó sẽ không kết xuất nếu thêm vào.
  filter: blur(35px);
}

Giá trị có thể: H -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng ngang. Các giá trị âm đặt bóng ở bên trái của hình ảnh.

V -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng dọc. Giá trị âm đặt bóng trên hình ảnh.

Blur - Tùy chọn. Đây là giá trị thứ ba, và phải có trong pixel. Thêm một hiệu ứng mờ cho bóng. Một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn (bóng trở nên lớn hơn và nhẹ hơn). Giá trị âm không được phép. Nếu không có giá trị được chỉ định, 0 được sử dụng (cạnh của bóng rất sắc nét).

lan truyền - tùy chọn. Đây là giá trị thứ tư, và phải có trong pixel. Các giá trị tích cực sẽ khiến bóng tối mở rộng và phát triển lớn hơn, và các giá trị âm sẽ khiến bóng tối bị thu hẹp. Nếu không được chỉ định, nó sẽ là 0 (bóng sẽ có cùng kích thước với phần tử). Lưu ý: Chrome, Safari và Opera, và có thể các trình duyệt khác, không hỗ trợ độ dài thứ 4 này; Nó sẽ không kết xuất nếu thêm vào.
  filter: brightness(200%);
}

Giá trị có thể: H -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng ngang. Các giá trị âm đặt bóng ở bên trái của hình ảnh.

V -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng dọc. Giá trị âm đặt bóng trên hình ảnh.

Blur - Tùy chọn. Đây là giá trị thứ ba, và phải có trong pixel. Thêm một hiệu ứng mờ cho bóng. Một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn (bóng trở nên lớn hơn và nhẹ hơn). Giá trị âm không được phép. Nếu không có giá trị được chỉ định, 0 được sử dụng (cạnh của bóng rất sắc nét).

lan truyền - tùy chọn. Đây là giá trị thứ tư, và phải có trong pixel. Các giá trị tích cực sẽ khiến bóng tối mở rộng và phát triển lớn hơn, và các giá trị âm sẽ khiến bóng tối bị thu hẹp. Nếu không được chỉ định, nó sẽ là 0 (bóng sẽ có cùng kích thước với phần tử). Lưu ý: Chrome, Safari và Opera, và có thể các trình duyệt khác, không hỗ trợ độ dài thứ 4 này; Nó sẽ không kết xuất nếu thêm vào.
  filter: contrast(200%);
}

Giá trị có thể: H -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng ngang. Các giá trị âm đặt bóng ở bên trái của hình ảnh.

V -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng dọc. Giá trị âm đặt bóng trên hình ảnh.

Blur - Tùy chọn. Đây là giá trị thứ ba, và phải có trong pixel. Thêm một hiệu ứng mờ cho bóng. Một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn (bóng trở nên lớn hơn và nhẹ hơn). Giá trị âm không được phép. Nếu không có giá trị được chỉ định, 0 được sử dụng (cạnh của bóng rất sắc nét).

lan truyền - tùy chọn. Đây là giá trị thứ tư, và phải có trong pixel. Các giá trị tích cực sẽ khiến bóng tối mở rộng và phát triển lớn hơn, và các giá trị âm sẽ khiến bóng tối bị thu hẹp. Nếu không được chỉ định, nó sẽ là 0 (bóng sẽ có cùng kích thước với phần tử). Lưu ý: Chrome, Safari và Opera, và có thể các trình duyệt khác, không hỗ trợ độ dài thứ 4 này; Nó sẽ không kết xuất nếu thêm vào.
  filter: drop-shadow(8px 8px 10px gray);
}

Giá trị có thể: H -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng ngang. Các giá trị âm đặt bóng ở bên trái của hình ảnh.

V -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng dọc. Giá trị âm đặt bóng trên hình ảnh.

Blur - Tùy chọn. Đây là giá trị thứ ba, và phải có trong pixel. Thêm một hiệu ứng mờ cho bóng. Một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn (bóng trở nên lớn hơn và nhẹ hơn). Giá trị âm không được phép. Nếu không có giá trị được chỉ định, 0 được sử dụng (cạnh của bóng rất sắc nét).

lan truyền - tùy chọn. Đây là giá trị thứ tư, và phải có trong pixel. Các giá trị tích cực sẽ khiến bóng tối mở rộng và phát triển lớn hơn, và các giá trị âm sẽ khiến bóng tối bị thu hẹp. Nếu không được chỉ định, nó sẽ là 0 (bóng sẽ có cùng kích thước với phần tử). Lưu ý: Chrome, Safari và Opera, và có thể các trình duyệt khác, không hỗ trợ độ dài thứ 4 này; Nó sẽ không kết xuất nếu thêm vào.
  filter: grayscale(50%);
}

Giá trị có thể: H -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng ngang. Các giá trị âm đặt bóng ở bên trái của hình ảnh.

V -Shadow - Yêu cầu. Chỉ định giá trị pixel cho bóng dọc. Giá trị âm đặt bóng trên hình ảnh.

Blur - Tùy chọn. Đây là giá trị thứ ba, và phải có trong pixel. Thêm một hiệu ứng mờ cho bóng. Một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn (bóng trở nên lớn hơn và nhẹ hơn). Giá trị âm không được phép. Nếu không có giá trị được chỉ định, 0 được sử dụng (cạnh của bóng rất sắc nét).

lan truyền - tùy chọn. Đây là giá trị thứ tư, và phải có trong pixel. Các giá trị tích cực sẽ khiến bóng tối mở rộng và phát triển lớn hơn, và các giá trị âm sẽ khiến bóng tối bị thu hẹp. Nếu không được chỉ định, nó sẽ là 0 (bóng sẽ có cùng kích thước với phần tử). Lưu ý: Chrome, Safari và Opera, và có thể các trình duyệt khác, không hỗ trợ độ dài thứ 4 này; Nó sẽ không kết xuất nếu thêm vào.
  filter: hue-rotate(90deg);
}

Hãy tự mình thử »

Đảo ngược ví dụ

Đảo ngược các mẫu trong hình ảnh:

img {& nbsp; Bộ lọc: Đảo ngược (100%);}
  filter: invert(100%);
}

Hãy tự mình thử »

Ví dụ mờ

Đặt mức độ mờ cho hình ảnh:

img {& nbsp; Bộ lọc: Opacity (30%);}
  filter: opacity(30%);
}

Hãy tự mình thử »

Ví dụ bão hòa

Bão hòa hình ảnh:

img {& nbsp; Bộ lọc: bão hòa (800%);}
  filter: saturate(800%);
}

Hãy tự mình thử »

Ví dụ về màu nâu đỏ

Chuyển đổi hình ảnh thành SEPIA:

img {& nbsp; Bộ lọc: SEPIA (100%);}
  filter: sepia(100%);
}

Hãy tự mình thử »

Sử dụng nhiều bộ lọc

Để sử dụng nhiều bộ lọc, hãy tách từng bộ lọc bằng một không gian. Lưu ý rằng thứ tự này rất quan trọng (nghĩa là sử dụng Grayscale () sau Sepia () sẽ dẫn đến hình ảnh hoàn toàn màu xám):

img {& nbsp; & nbsp; bộ lọc: độ tương phản (200%) độ sáng (150%);}
  filter: contrast(200%) brightness(150%);
}

Hãy tự mình thử »

Tất cả các bộ lọc

Trình diễn tất cả các chức năng bộ lọc:

.Blur {& nbsp; & nbsp; filter: blur (4px);}
  filter: blur(4px);
}

.Brightness {& nbsp; Bộ lọc: Độ sáng (0,30);}
  filter: brightness(0.30);
}

.Contrast {& nbsp; Bộ lọc: Độ tương phản (180%);}
  filter: contrast(180%);
}

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

.huerotate {& nbsp; Bộ lọc: Hue-ROTATE (180deg);}
  filter: hue-rotate(180deg);
}

.invert {& nbsp; Bộ lọc: Đảo ngược (100%);}
  filter: invert(100%);
}

.Opacity {& nbsp; & nbsp; filter: opacity (50%);}
  filter: opacity(50%);
}

.Saturate {& nbsp; & nbsp; filter: Saturate (7);}
  filter: saturate(7);
}

.sepia {& nbsp; Bộ lọc: SEPIA (100%);}
  filter: sepia(100%);
}

.Shadow {& nbsp; Bộ lọc: Drop-Shadow (8px 8px 10px màu xanh lá cây);}
  filter: drop-shadow(8px 8px 10px green);
}

Hãy tự mình thử »

Các trang liên quan

Hướng dẫn CSS: Hình ảnh CSS

Tham khảo HTML DOM: thuộc tính bộ lọc

Làm cách nào để thay đổi hình ảnh từ đen sang trắng trong CSS?

Làm cách nào để thay đổi màu của hình ảnh thành màu trắng trong CSS?

Làm cách nào để thay đổi màu của hình ảnh trong CSS?

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