Hình ảnh Greyscale với CSS và tô màu lại khi di chuột qua?

Question 1

Tôi đang tìm cách lấy một biểu tượng có màu (và sẽ là một liên kết) và chuyển nó sang thang độ xám cho đến khi người dùng đặt chuột lên biểu tượng (khi đó nó sẽ tô màu cho hình ảnh).

Điều này có thể thực hiện được không và IE & Firefox có hỗ trợ theo cách nào không?

Question 2

Có rất nhiều phương pháp để thực hiện điều này, tôi sẽ trình bày chi tiết bằng một vài ví dụ bên dưới.

CSS thuần túy (chỉ sử dụng một hình ảnh màu)

img.grayscale {
  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 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Hiển thị đoạn mã

img.grayscale {
  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 3.5+, IE10 */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .6s ease;
  /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

svg {
  background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}

<p>Firefox, Chrome, Safari, IE6-9</p>
<img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400">
<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  <defs>
     <filter id="filtersPicture">
       <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
       <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
   </svg>

Mở rộng đoạn mã

Bạn có thể tìm thấy một bài báo liên quan đến kỹ thuật này tại đây .

CSS thuần túy (sử dụng thang màu xám và hình ảnh có màu)

Cách tiếp cận này yêu cầu hai bản sao của một hình ảnh: một bản có thang độ xám và bản còn lại có đầy đủ màu sắc. Sử dụng :hoverpsuedoselector CSS , bạn có thể cập nhật nền của phần tử của mình để chuyển đổi giữa hai:

#yourimage { 
    background: url(../grayscale-image.png);
}
#yourImage:hover { 
    background: url(../color-image.png};
}

Hiển thị đoạn mã

#google {
  background: url('http://www.google.com/logos/keystroke10-hp.png');
  height: 95px;
  width: 275px;
  display: block;
  /* Optional for a gradual animation effect */
  transition: 0.5s;
}

#google:hover {
  background: url('https://graphics217b.files.wordpress.com/2011/02/logo1w.png');
}

<a id='google' href='http://www.google.com'></a>

Mở rộng đoạn mã

Điều này cũng có thể được thực hiện bằng cách sử dụng hiệu ứng di chuột dựa trên Javascript như hover()hàm của jQuery theo cách tương tự.

Xem xét thư viện của bên thứ ba

Các Desaturate thư viện là một thư viện phổ biến mà cho phép bạn dễ dàng chuyển đổi giữa các phiên bản màu xám và phiên bản đầy đủ màu của một nguyên tố hoặc hình ảnh.

Question 3

Đã trả lời ở đây: Chuyển đổi hình ảnh sang thang độ xám trong HTML / CSS

Bạn thậm chí không cần phải sử dụng hai hình ảnh nghe có vẻ đau đớn hoặc một thư viện thao tác hình ảnh, bạn có thể làm điều đó với sự hỗ trợ của nhiều trình duyệt (phiên bản hiện tại) và chỉ cần sử dụng CSS. Đây là một phương pháp tiếp cận nâng cao tiến bộ chỉ trở lại phiên bản màu trên các trình duyệt cũ hơn:

img {
  filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome & Safari 6+ */
}
img:hover {
  filter: none;
  -webkit-filter: none;
}

và tệp filter.svg như thế này:

<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>

Question 4

Tôi sử dụng mã sau trên http://www.diagnomics.com/

Chuyển đổi mượt mà từ b / w sang màu với hiệu ứng phóng đại (tỷ lệ)

    img.color_flip {
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    }

    img.color_flip:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
    }

Question 5

Bạn có thể sử dụng một sprite có cả hai phiên bản — màu và đơn sắc — được lưu trữ trong đó.

Question 6

Đây là một bản demo. Thậm chí hoạt động trong IE7:

http://james.padolsey.com/demos/grayscale/

và

http://james.padolsey.com/javascript/grayscaling-in-non-ie-b browser/