css3 greyscale實現去色 css3實現圖片或頁面變爲黑白效果

今天幫朋友看一效果，看到了手標滑過圖片變爲彩色的效果，很簡單又兼容各大瀏覽器的，無非是準備兩張圖，一張黑白，一張彩色，滑過切換背景圖或直接切換圖片方法，當然，誰也不想這麼複雜操作。

下面用css3安排下：

給標籤加上下方css代碼，即可變爲黑白，也就是去色

filter: grayscale(100%);
filter: gray;

安排下兼容寫法

    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;

如果要做滑過變爲彩色，舉個列子，網站頁面一排排圖片，均加了上方代碼，變爲黑白的，然後滑過讓恢復顏色，如下方代碼

初始代碼

img{
    filter: grayscale(100%);
    filter: gray;
}

滑過代碼

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

整個網站頁面變爲黑白色，直接加給 html 即可安排

本文詳情 http://www.sharedblog.cn/?post=186