General mask    background : #000;

stay body At the end of the label div Label as mask , as follows :
<div class="mask"></div>
his css style :
.mask{ position:fixed; top : 0; left : 0; bottom : 0; right : 0;
background:#000; /* General mask randomly set a color */ }
be careful : General mask plus transparency opacity It's the shadow effect .


Shadow effect    background : rgba(0,0,0,0.5);hsla(0,100%,80%,0.5);

The code is the same as a general mask , The only difference is the settings .mask The background color of the mask is used rgba() express , of course hsla() It's OK .css as follows :
.mask{ position:fixed; top : 0; left : 0; bottom : 0; right : 0;
background:rgba(0,0,0,.5); /*background:hsla(0,100%,80%,0.5)*/
/*background:#000; opacity:0.5; */ }
CSS The colors in the RGB Color space and HSL Color space is expressed in two ways . Among them, we often use RGB Color space .

RGB The color representation of color space includes : Hexadecimal color ( Like red :#FF0000),RGB colour ( Like red :rgb(255,0,0)),RGBA colour ( Like translucent red rgba(255,0,0,0.5)), In addition, common colors can be written directly by color name ( Like red :red).

HSL color , Is a kind of industrial color standard , Because it covers all the colors that human vision can perceive , So it is widely used in industry . HSL In color space ,H(Hue): Represents hue ,S(Saturation): Represents saturation ,L(Lightness): Represents brightness ,(A(Alpha): On behalf of opacity ).


Blur effect ( Ground glass effect )  filter: blur(5px); 
//css Define a fuzzy effect class .blur{ -webkit-filter: blur(5px); /* Chrome, Opera */
-moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } //js
Blurs the obscured object when the mask appears if($(".mask").is(":visible")){ $(".context").addClass("blur");
} else{ $(".context").removeClass("blur"); }
be careful : This is for objects that need to be blurred blur class , Not the mask itself .


©2019-2020 Toolsou All rights reserved,
Send love - A little romance for programmers VHDL—— Design of frequency divider Python Implementation of Hanoi Tower code It's over , Starting salary 30khtml+css+js Make a simple website home page QQ Login interface implementation Hill sorting of sorting algorithm ——c++ realization 【 Wechat applet learning 】 Netease music cloud code page implementation details Resume the 13th session python Blue Bridge Cup 2022 Solution to the 13th Blue Bridge Cup ( whole )