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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 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
dedecms系统常用术语汇总
2007/04/03 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
解析strtr函数的效率问题
2013/06/26 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
javascript 操作符(~、&、|、^、)使用案例
2014/12/31 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
JavaScript模拟push
2016/03/06 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
python实现rest请求api示例
2014/04/22 Python
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
自荐书范文
2013/12/08 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
Django如何与Ajax交互
2021/04/29 Python