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 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
HTML5播放实现rtmp流直播
Jun 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+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
python Pygame的具体使用讲解
2017/11/03 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
报关简历自我评价怎么写
2013/09/19 职场文书
红色故事演讲稿
2014/05/22 职场文书
公共场所禁烟标语
2014/06/25 职场文书
动物科学专业求职信
2014/07/27 职场文书
中小学生安全教育观后感
2015/06/17 职场文书