前端
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);
}
圖片再加一層，反反得正，這樣純圖片就可以了
因此，合并起來可以這樣設置：
html, img {
filter: invert(1) hue-rotate(.5turn);
}
img {
opacity: .75;
}
但是背景圖，黑色陰影就有問題了，針對背景圖，可以設置如下：
@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;
}
}
問題
上面的設置，只針對淺色背景，無背景，或者透明背景是不起作用的。
此外，還要針對各個樣式做特殊處理。例如可以配合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)文章，希望大家以后多多支持腳本之家！
