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
-webkit-filter: grayscale[1] invert[1];
filter: grayscale[1] invert[1];
3:.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
-webkit-filter: grayscale[1] invert[1];
filter: grayscale[1] invert[1];
4 thay vì -webkit-filter: grayscale[1] invert[1];
filter: grayscale[1] invert[1];
5 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
Cách để - hình ảnh đen trắng
Tìm hiểu cách tạo hình ảnh "đen trắng" với CSS.
Hình ảnh đen và trắng
Ảnh gốc
grayscale[100%]
Sử dụng thuộc tính CSS
-webkit-filter: grayscale[1] invert[1];
filter: grayscale[1] invert[1];
3 để chuyển đổi hình ảnh thành màu đen và trắng.Ví dụ về thang độ xám
Thay đổi màu của tất cả các hình ảnh thành màu đen và trắng [100% xám]:
img {& nbsp; -webkit lọc: màu xám [100%]; / * Safari 6.0 - 9.0 */& nbsp; Bộ lọc: thang độ xám [100%];}
-webkit-filter: grayscale[100%]; /* Safari 6.0 - 9.0 */
filter: grayscale[100%];
}
Hãy tự mình thử »
Đi đến hướng dẫn hình ảnh CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu hình ảnh.
Truy cập thuộc tính Bộ lọc CSS của chúng tôi để tìm hiểu thêm về các bộ lọc 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];
3 cho phép bạn áp dụng nhiều hiệu ứng đồ họa cho đánh dấu HTML của bạn bao gồm hình ảnh, DIV và các yếu tố khác. Bộ lọc -webkit-filter: grayscale[1] invert[1];
filter: grayscale[1] invert[1];
8 cho phép bạn chuyển đổi một hình ảnh thành nhiều sắc thái màu xám khác nhau, bao gồm cả màu đ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 là giá trị thuộc tính cho thuộc tính
-webkit-filter: grayscale[1] invert[1];
filter: grayscale[1] invert[1];
3 của bạn như vậy: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];
8, kết quả sẽ tương đương với việc đặt nó thành 1 hoặc 100%.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] */
}
.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];
0Và 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;
1 hoặc filter: progid:DXImageTransform.Microsoft.BasicImage[invert=1];
zoom: 1;
2, chúng tôi sẽ thấy những thay đổi được áp dụng giống như chúng đối với hình ảnh.Đen và trắng
-webkit-filter: grayscale[1] invert[1];
filter: grayscale[1] invert[1];
1Hello!
Grayscale-50
-webkit-filter: grayscale[1] invert[1];
filter: grayscale[1] invert[1];
2Hello!
Khá tuyệt phải không? Bộ lọc
-webkit-filter: grayscale[1] invert[1];
filter: grayscale[1] invert[1];
8 hoạt động trong hầu hết các trình duyệt hiện đại và là một cách tuyệt vời để thêm hiệu ứng đen trắng vào giao diện người dùng của bạn.