CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁灰色或者黑色模式的示例代碼

發(fā)布時(shí)間：2021-02-24 16:42:24 作者：Haorooms

這篇文章主要介紹了CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁灰色或者黑色模式的示例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前端

css3,filter實(shí)現(xiàn)不但可以實(shí)現(xiàn)網(wǎng)頁灰色效果，還可以輔助實(shí)現(xiàn)黑夜模式效果。我們來看看實(shí)現(xiàn)方式吧！

filter屬性介紹

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 使用空格分隔多個(gè)濾鏡。

網(wǎng)站灰色效果

這個(gè)效果博客建立之初，在總結(jié)css常用效果的時(shí)候就寫了。

只需要如下代碼就可以輕松實(shí)現(xiàn)！

代碼如下：

html {
   filter: grayscale(100%);//IE瀏覽器
  -webkit-filter: grayscale(100%);//谷歌瀏覽器
  -moz-filter: grayscale(100%);//火狐
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);//谷歌瀏覽器
}

相比灰色效果，黑夜模式實(shí)現(xiàn)，難度就大了一點(diǎn)！

黑夜模式判斷

如果是純Web，則在現(xiàn)代瀏覽器下，可以使用prefers-color-scheme查詢語句。

語法如下：

no-preference 系統(tǒng)沒有告知用戶使用的顏色方案。
light 表示系統(tǒng)傾向于使用淺色主題。
dark 表示系統(tǒng)傾向于使用深色主題。

例如：

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    body { background: #333; color: white; }
}
/* 淺色模式 */
@media (prefers-color-scheme: light) {
    body { background: white; color: #333; }
}

如果需要在JavaScript代碼中對系統(tǒng)的深淺主題進(jìn)行判斷，可以使用原生的window.matchMedia()方法，例如：

// 是否支持深色模式
// 返回true或false
window.matchMedia("(prefers-color-scheme: dark)").matches;

黑夜模式代碼

html {
    filter: invert(1) hue-rotate(.5turn);
}

這樣之后，圖片就會(huì)反過來了，很難看

img {
    filter: invert(1) hue-rotate(.5turn);
}

圖片再加一層，反反得正，這樣純圖片就可以了

因此，合并起來可以這樣設(shè)置：

html, img {
    filter: invert(1) hue-rotate(.5turn);
}
img {
    opacity: .75;    
}

但是背景圖，黑色陰影就有問題了，針對背景圖，可以設(shè)置如下：

@media (prefers-color-scheme: dark) {
    html, img { 
        filter: invert(1) hue-rotate(180deg);
    }
   .bgfilter{
    filter: invert(1) hue-rotate(180deg);
  }
    .some-ele-box {
        box-shadow: none;
    }
}

問題

上面的設(shè)置，只針對淺色背景，無背景，或者透明背景是不起作用的。

此外，還要針對各個(gè)樣式做特殊處理。例如可以配合filter 做全局變量，等，才可以完美匹配黑夜模式。例如如下：

@media (prefers-color-scheme: dark) {
    html {
        filter:invert(1) hue-rotate(180deg)
    }

    .dark-img,img {
        filter: invert(1) hue-rotate(180deg)
    }
   // 背景圖片特殊處理
  //全局顏色特殊處理
   //background-color: var(--darkColor)
}

到此這篇關(guān)于CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁灰色或者黑色模式的示例代碼的文章就介紹到這了,更多相關(guān)CSS3 filter濾鏡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！