The front-end uses css3the newly added filterattributes to realize the graying function of the page. One-click global modification of styles, adding filters, adding exposure, etc. flutterUse ColorFilteredwrap our 根widgetto achieve page graying.
Today, from the perspective of the front end, let's take a look at the principle and implementation process of graying.
In addition to the common front-end methods, this article will also tell you flutterhow to gray out all the pages in .
Originally, it was planned to be introduced in two articles, but flutterthe content is not much. Finally, after careful consideration, it is better to use one article.
About flutterhow to realize the graying of the page? at the end of the text.
Common front-end implementation and problems
Implementation ideas and principles
Let's take a look at how common mainstream websites 掘金, 淘宝, scdnand are implemented:
nuggets
Taobao
csdn
Through the above cases of mainstream websites, we know that these mainstream websites are css3all filterrealized through the newly added attribute in .
filterWhat is the use of attributes? What are you doing? We can first look at the explanation in MDN :
The CSS property filter applies graphical effects such as blurring or color shifting to elements. Filters are often used to adjust the rendering of images, backgrounds, and borders
The vernacular is that filterattributes are used to add different filters to elements. This attribute supports passing in various Filter functions . Among them grayscaleis the key for setting ash. Using grayscalewill change the input image grayscale.
Therefore, you only need to set the following style on htmlthe element to gray out the page:
html {
filter: grayscale(100%);
}
But we just saw that Taobao and other mainstream websites have many lines, not just one line like the one above, why is this?
answer:
This is because filterit is css3a new attribute, not all browsers (kernels) and versions support it, so in order to make more browsers (kernels) and versions grayed out, we see of many rows. But no matter how many lines there are, the effect is actually the same.
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);
}
Adapted kernel and version notes
*The picture comes from the Internet
-webkit-webkit:webkitThe browser with the prefix can take effect in the kernel, such as the commonchrome,safari,移动端浏览器;-moz-: withmozthe prefix canFirefoxtake effect in the browser;-o-: withothe prefix canOperatake effect in the browser;-ms-: withmsthe prefix canIEtake effect in the browser;
The last three lines in the above code are all browsers compatible with IEthe kernel . As we all know, iebrowsers are the browsers with the most things, and they can’t do anything, and they all have to be individually adapted.
filterproperty extension
1、blur
This property is used to set the element 模糊effect to apply a Gaussian blur visual effect to the element.
This property is often used to achieve the frosted glass effect of pictures.
.image{
width: 200px;
height: 200px;
filter: blur(1px);
}
2、brightness
This property is used to adjust 亮度the level of the image to make it appear brighter or darker.
.image{
width: 200px;
height: 200px;
filter: brightness(120%);
}
3、contrast
This property is used to resize the image 对比度.
.image{
width: 200px;
height: 200px;
filter: contrast(190%);
}
4、opacity
This property is used to adjust 透明the effect of the image.
.image{
width: 200px;
height: 200px;
filter: opacity(40%);
}
filterThe difference between the opacityand opacitythese two properties is explained:
filterEnabled hardwareopacity-浏览器acceleratedGPUrenderingopacityDisable hardware浏览器acceleratedGPUrendering
5、sepia
This property is used to adjust the image to add softness 褐色色调, making the image look warmer and more vintage.
.image{
width: 200px;
height: 200px;
filter: sepia(40%);
}
6、drop-shadow
This property is used to increase the image 阴影, similar box-shadowto making the image look more three-dimensional.
.image{
width: 200px;
height: 200px;
filter: drop-shadow(offset-x offset-y blur-radius color);
}
Accepts four parameters:
-
offset-x:x轴The length value, specifying the horizontal distance between the element and the projection. Positive values place the shadow to the right of the element, negative values place the shadow to the left. -
offset-y:y轴The length value, specifying the vertical distance between the element and the projection. Positive values place the shadow below the element, negative values place the shadow above it. -
blur-radius: The blur radius of the shadow. The larger the value, the blurrier the shadow becomes. Negative values are not allowed. -
color: The color of the shadow. Default is black.
.image{
width: 200px;
height: 200px;
filter: drop-shadow(10px 10px 10px #ff0000);
}
7、saturate
This property is used to change the color of the element 饱和度. Saturated elements are more vibrant in color; saturation can be increased for underexposed images and vice versa.
.image{
width: 200px;
height: 200px;
filter: saturate(40%);
}
8、initial
filterThe default value of will be parsed as none, using this value has no effect.
.image{
width: 200px;
height: 200px;
filter: initial;
}
9、hereditary
Inherit filterthe property .
/* 父盒子 */
.father-image{
filter: saturate(40%);
}
/* 图片 */
.image{
width: 200px;
height: 200px;
filter: inherit;
}
10、url
Accepts a XMLfile that sets a SVGfilter and can contain an anchor to specify a specific filter element.
I'm too lazy to find materials here, so I won't post pictures. last code.
.image{
width: 200px;
height: 200px;
filter: url('./sucai.xml');
}
Kind tips
filterMultiple attributes can be written and rendered according to the order.
Remember: you cannot use
initial, in multiple attributesinherit, otherwise it will have no effect.
.image{
width: 200px;
height: 200px;
filter: blur(1px) saturate(40%);
}
filterProblems after use
positionIf the value used in our project is absoluteor fixedis used, it will cause style confusion.
reason
When the element position's value is absoluteor fixed, filterone will be created for it 新的包含块或容器, causing the absoluteor fixedelement's positioning to change.
The vernacular is to absolutechange fixedthe positioning element basis of the or element and become a newly created element.
bodyAfter using the attribute in the tag filter, filterone is generated 新的包含块/容器, which 位置大小is bodythe same as the . fixedThe or absoluteelement will be based on this 包含块/容器进行定位, but not based on it 原元素作为依据进行定位, so filterafter we can see some interfaces with disordered or invalid styles;
solution
- We can
根元素（也就是html）addfilterattributes on it for unified addition - Add
filterattributes , such as:span,p,img,image,text,videoetc.
flutterImplement graying of the application page in
introduce
Flutter is Googlean open source user interface (UI) toolkit that helps developers efficiently build multi-platform beautiful applications through a set of code bases, supporting 移动, Web, 桌面and 嵌入式平台. Flutter is an open source and free cross-terminal framework with a loose open source agreement, suitable for commercial projects.
Method to realize
In flutteris not as complicated as in and 网页in 小程序, we only need to use ColorFilteredthe package root directory widgetto achieve the overall page graying.
Add toColorFiltered
We use ColorFilter.modethe attribute here, BlendModethe value is color, we can achieve our effect.
@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'),
),
);
}
The effect after adding:
