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动画效果之animation的常用样式
Mar 09 HTML / CSS
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
HTML中link标签属性的具体用法
May 07 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
解析thinkphp的左右值无限分类
2013/06/20 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
JavaScript While 循环基础教程
2007/04/05 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Python批量转换文件编码格式
2015/05/17 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
详解Python3 pickle模块用法
2019/09/16 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
个人素质的自我评价分享
2013/12/16 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
初中重阳节活动总结
2015/05/05 职场文书
高中政治教师教学反思
2016/02/23 职场文书