Image Greyscale พร้อม CSS & re-color เมื่อวางเมาส์?

ฉันต้องการใช้ไอคอนที่เป็นสี (และจะเป็นลิงค์) และเปลี่ยนเป็นสีเทาจนกว่าผู้ใช้จะวางเมาส์เหนือไอคอน (ซึ่งจะทำให้ภาพเป็นสี)

เป็นไปได้หรือไม่และในลักษณะที่รองรับ IE & Firefox

มีวิธีการมากมายในการทำสิ่งนี้ซึ่งฉันจะให้รายละเอียดพร้อมกับตัวอย่างด้านล่างนี้

CSS บริสุทธิ์ (ใช้ภาพสีเดียวเท่านั้น)

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%);
}

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>

คุณสามารถค้นหาบทความที่เกี่ยวข้องกับเทคนิคนี้ที่นี่

CSS บริสุทธิ์ (ใช้ภาพสีเทาและสี)

วิธีนี้ต้องใช้สำเนาของภาพสองชุด: ภาพหนึ่งเป็นสีเทาและอีกภาพหนึ่งเป็นสีเต็ม เมื่อใช้ CSS :hoverpsuedoselector คุณสามารถอัปเดตพื้นหลังขององค์ประกอบของคุณเพื่อสลับระหว่างทั้งสอง:

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

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

สิ่งนี้สามารถทำได้โดยใช้เอฟเฟกต์โฮเวอร์ที่ใช้ Javascript เช่นhover()ฟังก์ชันของ jQuery ในลักษณะเดียวกัน

พิจารณาห้องสมุดของบุคคลที่สาม

Desaturateห้องสมุดเป็นห้องสมุดทั่วไปที่ช่วยให้คุณสามารถสลับไปมาระหว่างรุ่นสีเทาและรุ่นเต็มรูปแบบสีขององค์ประกอบที่กำหนดหรือภาพ

ตอบที่นี่: แปลงรูปภาพเป็นโทนสีเทาใน HTML / CSS

คุณไม่จำเป็นต้องใช้ภาพสองภาพที่ฟังดูน่าปวดหัวหรือไลบรารีการปรับแต่งรูปภาพคุณสามารถทำได้ด้วยการรองรับเบราว์เซอร์ข้าม (เวอร์ชันปัจจุบัน) และใช้ CSS นี่เป็นวิธีการเพิ่มประสิทธิภาพแบบก้าวหน้าซึ่งจะกลับไปใช้เวอร์ชันสีในเบราว์เซอร์รุ่นเก่า:

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

และไฟล์ filter.svg ดังนี้:

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

ฉันใช้รหัสต่อไปนี้บนhttp://www.diagnomics.com/

การเปลี่ยนจาก b / w เป็นสีอย่างราบรื่นด้วยเอฟเฟกต์ขยาย (มาตราส่วน)

    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);
    }

คุณสามารถใช้สไปรต์ที่มีทั้งเวอร์ชันสีและขาวดำเก็บไว้ในนั้น

นี่คือการสาธิต ใช้งานได้แม้ใน IE7:

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

และ

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