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