[CSS]圖片灰階處理

在html部分加上filter屬性

 html {

filter: grayscale(100%);

}

兼容於各瀏覽器

html {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

增加一個svg濾鏡

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<filter id="greyscale">

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



 html{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: url(desaturate.svg#greyscale);

}

兼容於IE

html{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: url(desaturate.svg#greyscale);

filter: gray;

}