CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码


Posted in HTML / CSS onFebruary 24, 2021

前端

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 filter滤镜内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 #HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 #HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 #HTML / CSS
CSS3选择器新增问题的实现
Jan 21 #HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 #HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 #HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 #HTML / CSS
You might like
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
如何使用PHP中的字符串函数
2006/10/09 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
理解Javascript闭包
2013/11/01 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python读写Excel文件的实例
2013/11/01 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
护理自荐信
2013/10/22 职场文书
普通党员对照检查材料
2014/08/28 职场文书
2014年转正工作总结
2014/11/08 职场文书
给校长的建议书范文
2015/09/14 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL