网页制作CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码

2024年03月19日 11:28:40益点益滴1015

前端

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 系统没有告知用户使用的颜色方案。
light 表示系统倾向于使用浅色主题。
dark 表示系统倾向于使用深色主题。

例如:

  /* 深色模式 */  @media (prefers-color-scheme: dark) {      body { background: #333; color: white; }  }  /* 浅色模式 */  @media (prefers-color-scheme: light) {      body { background: white; color: #333; }  }

如果需要在JavaScript代码中对系统的深浅主题进行判断,可以使用原生的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)  }

网页制作CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码都看到这里了,搬砖不易,给小编点个赞呗,以后我会更有动力分享哦~

超赞,真给力!嗯,必须鼓励~

打赏 0
账号:mxy310@163.com[复制]
账号:77940140[复制]