Cách tốt nhất (nếu có) để làm cho hình ảnh xuất hiện "chuyển sang màu xám" bằng CSS (nghĩa là không tải phiên bản hình ảnh màu xám riêng biệt)?
Bối cảnh của tôi là tôi có các hàng trong một bảng mà tất cả đều có các nút ở bên phải hầu hết các ô và một số hàng cần trông nhẹ hơn các hàng khác. Vì vậy, tôi có thể làm cho phông chữ nhẹ hơn một cách dễ dàng tất nhiên nhưng tôi cũng muốn làm cho hình ảnh nhẹ hơn mà không phải quản lý hai phiên bản của mỗi hình ảnh.
Câu trả lời:
Nó có phải là màu xám không? Bạn chỉ có thể đặt độ mờ của hình ảnh thấp hơn (để làm mờ nó). Ngoài ra, bạn có thể tạo <div>lớp phủ và đặt màu xám (thay đổi alpha để có hiệu ứng).
html:
<div id="wrapper">
<img id="myImage" src="something.jpg" />
</div>css:
#myImage {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
}
/* or */
#wrapper {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
background-color: #000;
}Sử dụng thuộc tính bộ lọc CSS3:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}Hỗ trợ trình duyệt hơi tệ nhưng đó là CSS 100%. Một bài viết hay về thuộc tính bộ lọc CSS3 bạn có thể tìm thấy ở đây: http://blog.nmsdvid.com/css-filter-property/
contrast(x%)tài sản, ví dụ grayscale(100%) contrast(30%).
img { filter: grayscale(100%); opacity: 0.4; }
Của bạn ở đây:
<a href="#"><img src="img.jpg" /></a>Css Xám:
img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}Ungray:
a:hover img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none ; /* IE6-9 */
zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}Tôi tìm thấy nó tại: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao
Chỉnh sửa: IE10 + không hỗ trợ các bộ lọc DX như IE9 và trước đó đã thực hiện, cũng không hỗ trợ phiên bản tiền tố của bộ lọc thang độ xám. Bạn có thể sửa nó, sử dụng một trong hai giải pháp dưới đây:
<meta http-equiv="X-UA-Compatible" content="IE=9">Nếu bạn không phiền khi sử dụng một chút JavaScript, thì fadeTo () của jQuery hoạt động độc đáo trong mọi trình duyệt tôi đã thử.
jQuery(selector).fadeTo(speed, opacity);Tốt hơn để hỗ trợ tất cả các trình duyệt:
img.lessOpacity {
opacity: 0.4;
filter: alpha(opacity=40);
zoom: 1; /* needed to trigger "hasLayout" in IE if no width or height is set */
}Dưới đây là một ví dụ cho phép bạn đặt màu nền. Nếu bạn không muốn sử dụng float, thì bạn có thể cần phải đặt chiều rộng và chiều cao theo cách thủ công. Nhưng ngay cả điều đó thực sự phụ thuộc vào CSS / HTML xung quanh.
<style>
#color {
background-color: red;
float: left;
}#opacity {
opacity : 0.4;
filter: alpha(opacity=40);
}
</style>
<div id="color">
<div id="opacity">
<img src="image.jpg" />
</div>
</div>filter: grayscale(100%);@keyframes achromatization {
0% {}
25% {}
75% {filter: grayscale(100%);}
100% {filter: grayscale(100%);}
}
p {
font-size: 5em;
color: yellow;
animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
background-color: dodgerblue;
}<p>
⚡ Bzzzt!
</p>
<p>
⚡ Bzzzt!
</p>filter: contrast(0%);@keyframes gray-filling {
0% {}
25% {}
50% {filter: contrast(0%);}
60% {filter: contrast(0%);}
70% {filter: contrast(0%) brightness(0%) invert(100%);}
80% {filter: contrast(0%) brightness(0%) invert(100%);}
90% {filter: contrast(0%) brightness(0%);}
100% {filter: contrast(0%) brightness(0%);}
}
p {
font-size: 5em;
color: yellow;
animation: gray-filling 5s ease-out infinite alternate;
}
p:first-of-type {
background-color: dodgerblue;
}<p>
⚡ Bzzzt!
</p>
<p>
⚡ Bzzzt!
</p>Bạn có thể sử dụng rgba()trong css để xác định màu thay vì rgb(). Như thế này:
style='background-color: rgba(128,128,128, 0.7);
Cung cấp cho bạn cùng màu với rgb(128,128,128)nhưng với độ mờ 70%, vì vậy những thứ phía sau chỉ hiển thị 30%. CSS3 nhưng nó hoạt động trên hầu hết các trình duyệt kể từ năm 2008. Xin lỗi, không có cú pháp #rrggbb mà tôi biết. Chơi với các con số - bạn có thể rửa sạch với màu trắng, đổ bóng với màu xám, bất cứ thứ gì bạn muốn pha loãng.
OK để bạn tạo một hình chữ nhật có màu xám bán trong suốt (hoặc bất kỳ màu nào) và đặt nó lên trên hình ảnh của bạn, có thể với vị trí: tuyệt đối và chỉ số z cao hơn 0, và bạn đặt nó ngay trước hình ảnh của bạn và mặc định vị trí cho hình chữ nhật sẽ là góc trên bên trái của hình ảnh của bạn. Nên làm việc.
Xem xét bộ lọc: biểu thức là một phần mở rộng của Microsoft cho CSS, vì vậy nó sẽ chỉ hoạt động trong Internet Explorer. Nếu bạn muốn tô màu xám cho nó, tôi khuyên bạn nên đặt độ mờ cho 50% bằng cách sử dụng một chút javascript.
http://lyxus.net/mv sẽ là một nơi tốt để bắt đầu, bởi vì nó thảo luận về một kịch bản độ mờ hoạt động với các trình duyệt có khả năng của Firefox, Safari, KHTML, Internet Explorer và CSS3.
Bạn cũng có thể muốn cho nó một đường viền màu xám.