CSS ile Gri Tonlamalı Görüntü ve fareyle üzerine gelindiğinde yeniden renklendirme?

Renkli (ve bir bağlantı olacak) bir simge alıp kullanıcı faresini simgenin üzerine getirene kadar (daha sonra görüntüyü renklendireceği) gri tonlamalı hale getirmek istiyorum.

Bunu yapmak mümkün mü ve bir şekilde IE & Firefox destekli mi?

Bunu başarmanın çok sayıda yöntemi vardır, bunları aşağıda birkaç örnekle detaylandıracağım.

Saf CSS (yalnızca bir renkli görüntü kullanarak)

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>

Sen bulabilirsiniz Burada bu teknikle ilgili bir makale .

Saf CSS (gri tonlamalı ve renkli görüntüler kullanarak)

Bu yaklaşım, bir görüntünün iki kopyasını gerektirir: biri gri tonlamalı, diğeri tam renkli. CSS ön :hoverseçiciyi kullanarak, ikisi arasında geçiş yapmak için öğenizin arka planını güncelleyebilirsiniz:

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

Bu hover(), aynı şekilde jQuery'nin işlevi gibi Javascript tabanlı bir fareyle üzerine gelme efekti kullanılarak da gerçekleştirilebilir .

Bir Üçüncü Taraf Kitaplığı düşünün

Desaturate kütüphane kolayca belirli bir elementin veya görüntünün bir gri tonlama sürümü ve tam renkli sürümü arasında geçiş sağlayan genel bir kütüphanedir.

Burada cevaplandı: Bir resmi HTML / CSS'de gri tonlamaya dönüştürün

Ağrı veya görüntü işleme kitaplığına benzeyen iki görüntü kullanmanıza bile gerek yok, bunu çapraz tarayıcı desteği (mevcut sürümler) ile yapabilir ve sadece CSS kullanabilirsiniz. Bu, eski tarayıcılardaki renkli sürümlere geri dönen aşamalı bir geliştirme yaklaşımıdır:

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

ve filters.svg dosyası şöyle:

<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/ adresinde aşağıdaki kodu kullanıyorum

Büyütme efekti (ölçek) ile siyah beyazdan renkliye yumuşak geçiş

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

İçinde hem renkli hem de monokrom versiyonu olan bir hareketli grafik kullanabilirsiniz .

İşte bir demo. IE7'de bile çalışıyor:

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

ve

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