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
©2019-2020 Toolsou All rights reserved,
One is called “ Asking for the train ” A small village Finally got the train Spring Boot Lesson 16 :SpringBoot Implementation of multithreading with injection class Chrome OS, For programmers and Windows What does it mean ? Internet Marketing JAVA Convert a string to a numeric type I've been drinking soft water for three years ? What is the use of soft water and water softener You don't know ——HarmonyOS Talking about uni-app Page value transfer problem JavaScript Medium Call and ApplySparkSQL Achieve partition overlay write Character recognition technology of vehicle license plate based on Neural Network