Fare üzerinde resim CSS ile Gri ve yeniden renk? | Netgez.com
SORU
1 EYLÃœL 2011, PERÅžEMBE

Fare üzerinde resim CSS ile Gri ve yeniden renk?

Renkli bir simge (ve bir link olacak) ve kullanıcı simgesi üzerinde fare resmi renkli olur) yerlere kadar siyah-beyaz açmak için sabırsızlanıyorum.

Bu, IE ve Firefox desteklenen bir şekilde yapmak mümkün mü?

CEVAP
1 EYLÃœL 2011, PERÅžEMBE

Bunu sağlamanın birçok yöntemi vardır:

1.) CSS-Sadece, sadece tek 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%);
}

DemoveSource

2.) CSS-Sadece, Görüntüleri iki set kullanarak (Gri Renkli)

Görüntüyü tam renkli olarak iki nüsha, gri ve diğer gerekir, ve sonra CSS kullanarak, sadece hover stili renkli resim kullanmak için geçerli olabilir.

#yourimage { background: url(../YourBlackAndWhiteImage.png);}
#yourImage:hover { background: url(../YourColoredImage.png};}

Working Demo

bu da başarılı hover() jQuery yöntemi kullanıyor olabilir.

3.) Bu işlevi yerine getirmek için özel bir kütüphane kullanarak

desaturate kütüphane görüntüler, kolayca gri tonlama sürümü ve tam renkli bir sürüm arasında geçiş yapmak için izin yönetir.

Bunu PaylaÅŸ:
  • Google+
  • E-Posta
Etiketler:
CssFare ÃœzerindeMouseoverGriGrayscale

AYNI ETÄ°KETTEKÄ° VÄ°DEOLAR

YORUMLAR

SPONSOR VÄ°DEO

Rastgele Yazarlar

  • Damien Walters

    Damien Walte

    20 AÄžUSTOS 2006
  • efaustus9

    efaustus9

    16 HAZÄ°RAN 2006
  • Electro Posé

    Electro PosÃ

    21 ÅžUBAT 2013

Ä°LGÄ°LÄ° SORU / CEVAPLAR

Ä°LGÄ°LÄ° BAÄžLANTILAR