css3背景色由浅黑变深黑_CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码

前端

css3,filter实现不但可以实现网页灰色效果，还可以辅助实现黑夜模式效果。我们来看看实现方式吧！

filter属性介绍

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

提示: 使用空格分隔多个滤镜。

网站灰色效果

这个效果博客建立之初，在总结css常用效果的时候就写了。

只需要如下代码就可以轻松实现！

代码如下：

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);//谷歌浏览器

}

相比灰色效果，黑夜模式实现，难度就大了一点！

黑夜模式判断

如果是纯Web，则在现代浏览器下，可以使用prefers-color-scheme查询语句。

语法如下：

no-preference 系统没有告知用户使用的颜色方案。