CSS把彩色圖片變為灰度圖片

http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

In the css folder create a file named filters.svg with the following contents:-

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

Then use this CSS:- [Demo]

img {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

---

To disable grayscale on hover you can use:-

img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}