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 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 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
PHP操作mysql数据库分表的方法
2016/06/09 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
go和python调用其它程序并得到程序输出
2014/02/10 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
架构师岗位职责
2013/11/18 职场文书
药店主任岗位责任制
2014/02/10 职场文书
优秀学生评语大全
2014/04/25 职场文书
宿舍标语大全
2014/06/19 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
一年级小学生评语大全
2014/12/25 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
python实现层次聚类的方法
2021/11/01 Python
SpringBoot整合Minio文件存储
2022/04/03 Java/Android