image.png

今天从前端的角度出发，看看变灰的原理及实现过程。

除了普通的前端常用方式，本文还会告诉大家在flutter中如何使所有的页面变灰哦。

原本是准备分两篇文章介绍的，但flutter的内容不多，最后仔细一想还是用一篇文章吧。
关于flutter如何实现页面变灰？在文末。

常见前端实现及问题

实现思路及原理

我们先一起看一下常见的主流网站掘金、淘宝、scdn是怎么实现的：

掘金

image.png

淘宝

image.png

csdn

image.png

经过上面的主流网站案例我们得知，这些主流网站都是通过 css3 中的新增的 filter 属性实现的。

filter属性有啥用？是干啥的？我们可以先看一下MDN中的解释：

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染

大白话就是 filter 属性就是用来给元素添加不同的滤镜。该属性中支持传入多种 Filter 函数。其中 grayscale是用于置灰的关键。使用grayscale将改变输入图像灰度。

因此，只需将页面的 html 元素设置以下样式即可实现页面置灰：

1
2
3
html  {
     filter: grayscale(100%);
}

但我们刚刚看到淘宝等主流网站有很多行，并不是单单的像上面那样只有一行，这是为什么呢？

解答：

这是因为filter是css3新增的一个属性，并不是所有的浏览器（内核）和版本都支持，所以为了让更多的浏览器（内核）及版本达到变灰的这个效果，就出现了我们看到的很多行。但无论有多少行，其实实现的效果都是一样的。

1
2
3
4
5
6
7
8
9
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

适配内核及版本说明

image.png

*图片源于网络

  • -webkit-：带有 webkit 前缀可以在 webkit 内核的浏览器中生效，如常见的chrome、safari、移动端浏览器；
  • -moz-：带有 moz 前缀可以在 Firefox 浏览器中生效；
  • -o-：带有 o 前缀可以在 Opera 浏览器生效；
  • -ms-：带有 ms 前缀可以在 IE 浏览器生效；

上面的代码中最后三行全是兼容 IE 内核的浏览器，大家都知道，ie 浏览器是事最多的浏览器，干啥都不行，全都要单独适配。

filter属性扩展

1、blur

该属性用于设置元素模糊效果，将高斯模糊视觉效果应用于元素。

该属性常用于实现图片的毛玻璃效果。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: blur(1px); 
   }

image.png

2、brightness

该属性用于调整图像的亮度级别，使其看起来更亮或更暗。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: brightness(120%); 
   }

image.png

3、contrast

该属性用于调整图像的对比度。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: contrast(190%); 
   }

image.png

4、opacity

该属性用于调整图像的透明效果。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: opacity(40%); 
   }

image.png

filter 的 opacity 和 opacity 这两个属性的区别说明：

  • filter 的opacity开启浏览器的GPU硬件加速渲染
  • opacity不开启浏览器的GPU硬件加速渲染

5、sepia

该属性用于调整图像添加柔和的褐色色调，让图像看起来更温暖、更复古。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: sepia(40%); 
   }

image.png

6、drop-shadow

该属性用于增加图像的阴影，类似于box-shadow，使图像看起来更加立体。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: drop-shadow(offset-x offset-y blur-radius color); 
   }

接受四个参数：

  • offset-x：x轴长度值，指定元素和投影之间的水平距离。正值将阴影置于元素右侧，负值将阴影置于左侧。

  • offset-y：y轴长度值，指定元素和投影之间的垂直距离。正值将阴影置于元素下方，负值将阴影置于其上方。

  • blur-radius: 阴影的模糊半径。值越大，阴影变得越模糊。不允许使用负值。

  • color：阴影的颜色。默认为黑色。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: drop-shadow(10px 10px 10px #ff0000); 
   }

image.png

7、saturate

该属性用于改变元素中颜色的饱和度。饱和元素的颜色比较鲜艳；对于曝光不足的图像可以增加饱和度，反之亦然。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: saturate(40%); 
   }

image.png

8、initial

filter 的默认值，会被解析为none，使用该值啥效果也没有。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: initial; 
   }

在这里插入图片描述

9、inherit

继承父级元素的 filter 属性。

1
2
3
4
5
6
7
8
9
10
   /* 父盒子 */
   .father-image{
       filter: saturate(40%);
   }
   /* 图片 */
   .image{
width: 200px;
       height: 200px;
       filter: inherit; 
   }

image.png

10、url

接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

我这里懒的去找素材，就不上图了。上个代码。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: url('./sucai.xml'); 
   }

温馨提示

filter 的属性是可以写多个的，根据顺序渲染。

谨记：多个属性中不可以使用initial、inherit，不然会没效果的。

1
2
3
4
5
   .image{
width: 200px;
       height: 200px;
       filter: blur(1px) saturate(40%); 
   }

image.png

使用filter后的问题

如果我们的项目中在使用position的值为absolute或者fixed上使用，会导致样式错乱。

原因

当元素的 position 的值为absolute 或者fixed 时，filter 会为其创建一个新的包含块或容器，造成该 absolute 或 fixed 元素的定位发生改变。

大白话就是改变了 absolute 或 fixed 元素的定位元素依据，变成了一个新创建的元素。

在 body 标签中使用 filter 属性后， filter 会生成一个新的包含块/容器，其位置大小和 body 一样。fixed 或absolute 元素就会根据这个包含块/容器进行定位，而不在根据原元素作为依据进行定位，所以加了 filter 后我们看到了部分样式错乱失效或失效的界面；

解决方案

  1. 我们可以在根元素（也就是html）上添加 filter 属性，进行统一添加
  2. 对指定标签元素添加 filter 属性，如：span、p、img、image、text、video等

flutter中实现应用页面变灰

介绍

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 是一个开源且免费的跨端框架，拥有宽松的开源协议，适合商业项目。

实现方式

在flutter中没有像网页、小程序中这样复杂，我们只需要使用ColorFiltered包裹根目录widget就可以实现整体的页面变灰。

image.png

添加ColorFiltered

我们这里使用ColorFilter.mode属性，BlendMode的值为color，就可以实现我们的效果了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@override
Widget build(BuildContext context) {
    return ColorFiltered(
        colorFilter: const ColorFilter.mode(
            Color(0xff8a8a8a),
            BlendMode.color,
        ),
        child: MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: const MyHomePage(title: 'Flutter Demo Home Page'),
        ),
    );
}

添加后的效果：

image.png