Hướng dẫn hover image black and white css - di chuột hình ảnh đen trắng css

3

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.

Làm thế nào làm cho hình ảnh thành màu đen/trắng và sau đó được tô màu trên di chuột trong Safari và cả trong tất cả các trình duyệt?

img.grayscale {
    filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+ */
    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: url("data:image/svg+xml;utf8,#grayscale");
    -webkit-filter: grayscale(0%);
}

http://jsfiddle.net/KDtAX/487/

Mã này không hoạt động trong Safari.

Khi được hỏi ngày 2 tháng 5 năm 2013 lúc 8:55May 2, 2013 at 8:55

3

Tôi đã tìm thấy một giải pháp nên hoạt động trên Google Chrome, Safari 6+ & Opera 15+. Chỉ cần sao chép và dán mã sau vào tệp CSS của bạn thành:

1. Đầu tiên, biến tất cả các hình ảnh màu thành màu đen và trắng (100% xám);

2. Sau đó, biến hình ảnh trở lại màu khi bạn chuột qua.

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

Trong trường hợp bạn muốn áp dụng hiệu ứng này cho chỉ một hình ảnh:

1. Đầu tiên, hãy cung cấp cho hình ảnh này một ID duy nhất trong tệp HTML của bạn. Ví dụ:

2. Sau đó, xác định quy tắc CSS cho ID đó trong tệp CSS của bạn:

   #stefets-picture {
       filter: grayscale(100%);
       -webkit-filter: grayscale(100%);
   }
   
   #stefets-picture:hover {
       filter: none;
       -webkit-filter: grayscale(0);
   }
   

Hi vọng điêu nay co ich,

Stefets

Đã trả lời ngày 18 tháng 3 năm 2017 lúc 19:31Mar 18, 2017 at 19:31

Stefetsstefetsstefets

3242 Huy hiệu bạc8 Huy hiệu Đồng2 silver badges8 bronze badges

Điều gì sẽ xảy ra nếu bạn muốn có hình ảnh màu xám trên một trang web chuyển sang màu sắc khi người dùng lơ lửng hoặc vòi?

Thay vì tải hai hình ảnh riêng biệt, chúng ta có thể áp dụng hiệu ứng thang độ xám cho một hình ảnh màu duy nhất bằng CSS.

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 */    
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray; /* IE 6-9 */
}

Sau đó, để vô hiệu hóa nó khi di chuột ...

img:hover {
   -webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   filter: none;
}

Nó thậm chí còn tương thích với trình duyệt chéo với IE6.

Dưới đây là một đoạn mã CSS để giúp bạn chuyển hình ảnh sang màu đen và trắng trên di chuột.

Thử nghiệm

Xem bút pzlker của Jonathan Klughertz (@klugjo) trên Codepen.

Mã số

Đây là mã đầy đủ

img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); 
  filter: grayscale(0%); 
}

img:hover {
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 
}

- Hiệu ứng đen trắng đạt được với giá trị `grayscale` cho [bộ lọc] (https://developer.mozilla.org/en/docs/web/css/filter).`GRAYSCALE (100%)` tương ứng với màu đen và trắng và `thang độ xám (0%)` tương ứng với màu sắc đầy đủ.Tiền tố `-webkit filter` là [cần thiết cho thuộc tính đó] (http://shouldiprefix.com/#filters).- Hoạt hình mượt mà đạt được với [Chuyển tiếp] (https://developer.mozilla.org/en-us/docs/web/css/css_transitions/using_css_transitions).
- The smooth animation is achieved with the [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) property.