Color

Gray

<img src="img/color.jpg" class="grayscale">
<img src="img/color.jpg" class="grayscale grayscale-fade">
<img src="img/color.jpg" class="grayscale" alt="Decorative lights">
<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;
">
<div style="
background-image: url(img/color.jpg);
display         : inline-block;
width           : 180px;
height          : 72px;
" class="grayscale"></div>
<div style="
background-image   : url(img/color-sprite.jpg);
background-position: -180px 0;
display            : inline-block;
width              : 180px;
height             : 72px;
" class="grayscale"></div>
<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');

适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

来源:站长素材