Xám ra hình ảnh bằng CSS?

Question

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" với CSS (nghĩa là, không tải phiên bản màu xám riêng biệt, màu xám)?

Ngữ cảnh của tôi là tôi có các hàng trong một bảng có tất cả các nút trong ô bên phải và một số hàng cần phải 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 cần phải quản lý hai phiên bản của mỗi hình ảnh.

Answer 1

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 lớp phủ <div> 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; 
  } 
  

Answer 2

Dưới đây là một ví dụ cho phép của bạn thiết lập màu sắc của nền. Nếu bạn không muốn sử dụng phao, thì bạn có thể cần đặ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> 

Answer 3

Xem xét bộ lọc: biểu thức là một phần mở rộng của Microsoft thành CSS, vì vậy nó sẽ chỉ hoạt động trong Internet Explorer. Nếu bạn muốn màu xám nó ra, tôi sẽ khuyên bạn nên thiết lập nó opacity đến 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ờ đục tập lệnh hoạt động với 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 cung cấp cho nó đường viền màu xám.

Answer 4

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 */ 
} 

Answer 5

Nếu bạn không nhớ sử dụng một chút JavaScript, jQuery fadeTo() công trình độc đáo ở mọi trình duyệt tôi đã cố gắng.

jQuery(selector).fadeTo(speed, opacity); 

Answer 6

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ột màu như rgb(128,128,128) nhưng với độ mờ 70% nên nội dung chỉ hiển thị thông qua 30%. CSS3 nhưng nó hoạt động trong 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 những con số - bạn có thể rửa sạch với màu trắng, bóng ra với màu xám, bất cứ điều gì bạn muốn pha loãng với. OK, do đó bạn tạo một hình chữ nhật 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 và vị trí mặc định cho hình chữ nhật sẽ là góc trên cùng bên trái của hình ảnh của bạn. Nên làm việc.

Answer 7

Sử dụng thuộc tính lọc CSS3:

img { 
    -webkit-filter: grayscale(100%); 
     -moz-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
      filter: grayscale(100%); 
} 

Sự hỗ trợ trình duyệt là một chút xấu nhưng đó là 100% CSS. Một bài báo tốt đẹp về tài sản lọc CSS3 bạn có thể tìm thấy ở đây: http://blog.nmsdvid.com/css-filter-property/

Answer 8

của bạn ở đây:

<a href="#"><img src="img.jpg" /></a> 

Css Grey:

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 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ợ 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 chữa nó, sử dụng một trong hai giải pháp dưới đây:

1. Set IE10 + để render sử dụng chế độ tiêu chuẩn IE9 sử dụng các yếu tố meta sau vào đầu: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Sử dụng lớp phủ SVG trong IE10 để hoàn thành greyscaling internet explorer 10 - howto apply grayscale filter?