跨浏览器彩色图片转黑白图片jquery插件 Make an image grayscale in all browsers

jQuery之家 返回下载页

Color

Gray

<img> tag 

<img src="img/color.jpg" class="grayscale">

<img> tag with transition 

<img src="img/color.jpg" class="grayscale grayscale-fade">

<img> tag with alt

Decorative lights
Decorative lights 
<img src="img/color.jpg" class="grayscale" alt="Decorative lights">

<img> tag with styles 

<img src="img/color.jpg" class="grayscale" style="
  position  : absolute;
  top       : 0;
  left      : 50%;
  margin    : 0 0 0 -90px;
  padding   : 5px;
  border    : 1px solid #ddd;
">

CSS background 

<div style="
  background-image: url(img/color.jpg);
  display         : inline-block;
  width           : 180px;
  height          : 72px;
" class="grayscale"></div>

CSS sprite background 

<div style="
  background-image   : url(img/color-sprite.jpg);
  background-position: -180px 0;
  display            : inline-block;
  width              : 180px;
  height             : 72px;
" class="grayscale"></div>

CSS sprite background with background-size 

<div style="
  background-image   : url(img/color-sprite-lg.jpg);
  background-size    : auto 72px;
  background-position: -180px 0;
  display            : inline-block;
  width              : 180px;
  height             : 72px;
" class="grayscale"></div>

Toggling Grayscale 

$('.grayscale').toggleClass('grayscale-off');