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

前端
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屬性的使用簡介,幫助大家更好的理解和學(xué)習(xí)使用css3,感興趣的朋友可以了解下2021-03-30
CSS3 filter(濾鏡)實現(xiàn)網(wǎng)頁灰色或者黑色模式的代碼
這篇文章主要介紹了CSS3 filter(濾鏡)實現(xiàn)網(wǎng)頁灰色或者黑色模式的代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以2020-11-30css中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屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素形成濾鏡,濾鏡通常用于調(diào)整圖像,背景和邊框的渲染。本文給大家分享CSS filter 有什么神奇用途,感興趣的朋友跟隨小2021-05-25