• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码

    前端

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

    上一篇:CSS弹性布局FLEX,媒体查询及移动端点击事件的实现
    下一篇:纯 CSS 实现拖拽效果的代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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