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 .
Technology
Daily Recommendation