css3,filter實(shí)現(xiàn)不但可以實(shí)現(xiàn)網(wǎng)頁灰色效果,還可以輔助實(shí)現(xiàn)黑夜模式效果。我們來看看實(shí)現(xiàn)方式吧!
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
提示: 使用空格分隔多個(gè)濾鏡。
這個(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代碼中對(duì)系統(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; }
但是背景圖,黑色陰影就有問題了,針對(duì)背景圖,可以設(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è)置,只針對(duì)淺色背景,無背景,或者透明背景是不起作用的。
此外,還要針對(duì)各個(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
標(biāo)簽:大同 延邊 赤峰 林芝 泰州 萍鄉(xiāng) 保定
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁灰色或者黑色模式的示例代碼》,本文關(guān)鍵詞 ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。