css3 greyscale實(shí)現(xiàn)去色 css3實(shí)現(xiàn)圖片或頁面變?yōu)楹诎仔Ч?/h1>

發(fā)布時間：2020-07-06 13:17:19 來源：網(wǎng)絡(luò) 閱讀：1865 作者：鵬仔先生 欄目：web開發(fā)

今天幫朋友看一效果，看到了手標(biāo)滑過圖片變?yōu)椴噬男Ч?，很簡單又兼容各大瀏覽器的，無非是準(zhǔn)備兩張圖，一張黑白，一張彩色，滑過切換背景圖或直接切換圖片方法，當(dāng)然，誰也不想這么復(fù)雜操作。

下面用css3安排下：

給標(biāo)簽加上下方css代碼，即可變?yōu)楹诎?，也就是去?/p>

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;

如果要做滑過變?yōu)椴噬?，舉個列子，網(wǎng)站頁面一排排圖片，均加了上方代碼，變?yōu)楹诎椎?，然后滑過讓恢復(fù)顏色，如下方代碼

初始代碼

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

滑過代碼

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

整個網(wǎng)站頁面變?yōu)楹诎咨苯蛹咏o html 即可安排

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

css-t div+css css modules css樣式 postcss html+css+js css3動畫 csss3 css sprite css顏色 css屬性 html/css animate.css css文件 css預(yù)處理器 css優(yōu)先級 css盒子模型 css3新特性 css權(quán)重 css邊框樣式