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 相关文章推荐
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
在PHP的图形函数中显示汉字
2006/10/09 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP加密解密函数详解
2015/10/28 PHP
php实现socket推送技术的示例
2017/12/20 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
python将文本中的空格替换为换行的方法
2018/03/19 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Python turtle画图库&&画姓名实例
2020/01/19 Python
Python如何对XML 解析
2020/06/28 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
英语系本科生个人求职信
2013/09/21 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
领导接待方案
2014/03/13 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
老龄工作先进事迹
2014/08/15 职场文书
购房协议书范本
2014/10/02 职场文书
单位租房协议书范本
2014/12/04 职场文书
九寨沟导游词
2015/02/02 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
Python 中random 库的详细使用
2021/06/03 Python