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实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
CSS基础详解
Oct 16 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显示搜索引擎来的关键词
2014/02/13 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
Python脚本实现格式化css文件
2015/04/08 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
运动会四百米广播稿
2014/01/19 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
感谢师恩主题班会
2015/08/17 职场文书
思想品德课教学反思
2016/02/24 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL