欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間:2021-02-24 16:42:24   作者:Haorooms   我要評論
這篇文章主要介紹了CSS3 filter(濾鏡)實現(xiàn)網(wǎng)頁灰色或者黑色模式的示例代碼,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

前端

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

filter屬性介紹

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

提示: 使用空格分隔多個濾鏡。

網(wǎng)站灰色效果

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

只需要如下代碼就可以輕松實現(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);//谷歌瀏覽器
}

相比灰色效果,黑夜模式實現(xià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)的深淺主題進行判斷,可以使用原生的window.matchMedia()方法,例如:

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

黑夜模式代碼

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

這樣之后,圖片就會反過來了,很難看

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è)置,只針對淺色背景,無背景,或者透明背景是不起作用的。

此外,還要針對各個樣式做特殊處理。例如可以配合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(濾鏡)實現(xiàn)網(wǎng)頁灰色或者黑色模式的示例代碼的文章就介紹到這了,更多相關(guān)CSS3 filter濾鏡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

  • css3 filter屬性的使用簡介

    這篇文章主要介紹了css3 filter屬性的使用簡介,幫助大家更好的理解和學(xué)習(xí)使用css3,感興趣的朋友可以了解下
    2021-03-30
  • CSS3 filter(濾鏡)實現(xiàn)網(wǎng)頁灰色或者黑色模式的代碼

    這篇文章主要介紹了CSS3 filter(濾鏡)實現(xiàn)網(wǎng)頁灰色或者黑色模式的代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以
    2020-11-30
  • css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解

    這篇文章主要介紹了css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面
    2020-09-14
  • 詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應(yīng)用

    這篇文章主要介紹了詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應(yīng)用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友
    2020-08-24
  • 使用css的filter寫鼠標(biāo)滑過效果的實現(xiàn)示例

    這篇文章主要介紹了使用css的filter寫鼠標(biāo)滑過效果的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編
    2020-08-13
  • CSS filter 有什么神奇用途

    CSS filter屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素形成濾鏡,濾鏡通常用于調(diào)整圖像,背景和邊框的渲染。本文給大家分享CSS filter 有什么神奇用途,感興趣的朋友跟隨小
    2021-05-25

最新評論