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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 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/11/13 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
Angular实现响应式表单
2017/08/04 Javascript
vue跨域解决方法
2017/10/15 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
Tensorflow卷积神经网络实例
2018/05/24 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
python如何调用百度识图api
2020/09/29 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
学生党员思想汇报
2013/12/28 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
结对共建工作方案
2014/06/02 职场文书
五一活动标语
2014/06/30 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
人民币使用说明书
2019/04/17 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
pandas中DataFrame重置索引的几种方法
2021/05/24 Python