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


Posted in HTML / CSS onNovember 30, 2020

前端

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(滤镜)实现网页灰色或者黑色模式的文章就介绍到这了,更多相关CSS3滤镜实现网页灰色或者黑色模式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
CSS3 实现时间轴动画
Nov 25 #HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 #HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 #HTML / CSS
CSS3 实现倒计时效果
Nov 25 #HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 #HTML / CSS
CSS3实现菜单悬停效果
Nov 17 #HTML / CSS
详解CSS3:overflow属性
Nov 17 #HTML / CSS
You might like
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python MD5加密实例详解
2017/08/02 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
python中time.ctime()实例用法
2021/02/03 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
error和exception有什么区别
2012/10/02 面试题
爱岗敬业演讲稿
2014/05/05 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
2014年教研组工作总结
2014/11/26 职场文书
物流业务员岗位职责
2015/04/03 职场文书
教师节校长致辞
2015/07/31 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python
总结Python使用过程中的bug
2021/06/18 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python