Mirror app html style CSS div mask background layer style

After setting the background picture, if the background picture is too bright, it is recommended that you put a div mask background layer-the style of the Div mask layer in the CSS currently released by Google:

1 /*Overlay gradient to allow text to is read over the image.*/2 3 /*For cards with lines of text (excluding footer)4 * Ex:hybrid templates & Those needing more bottom readability5  */6 Div.overlay-gradient-tall{7 Display:Block;8 position:Absolute;9 Top:30%;Ten  Left:0; One  Right:0; A Bottom:0; - background:-webkit-linear-gradient (Rgba (0,0,0,0.0), Rgba (0,0,0,0.8)); -} the  - /*A Darker variant of the above gradient to improve readability.*/ - Div.overlay-gradient-tall-dark{ - Display:Block; + position:Absolute; - Top:0; +  Left:0; A  Right:0; at Bottom:0; - background:-webkit-linear-gradient (Rgba (0,0,0,0.2) 30%, Rgba (0,0,0,0.85) 100%); -} -  - /*For cards with one line of text (excluding footer) - * Ex:photos, videos, people in  */ - Div.overlay-gradient-medium{ to Display:Block; + position:Absolute; - Top:50%; the  Left:0; *  Right:0; $ Bottom:0;Panax Notoginseng background:-webkit-linear-gradient (Rgba (0,0,0,0.0), Rgba (0,0,0,0.8)); -} the  + /*For cards with low text A * Ex:footer, ToolTips the  */ + Div.overlay-gradient-short{ - Display:Block; $ position:Absolute; $ Top:70%; -  Left:0; -  Right:0; the Bottom:0; - background:-webkit-linear-gradient (Rgba (0,0,0,0.0), Rgba (0,0,0,0.6));Wuyi} the  - /*For cards with full-height or near-full-height text on top of a photo or Wu * Mosiac.*/ - Div.overlay-full{ About Display:Block; $ position:Absolute; - Top:0; -  Left:0; -  Right:0; A Bottom:0; + Background-color:rgba (0, 0, 0, 0.7); the}

1 First style <class= "Overlay-gradient-tall"></Div  >

The display results are as follows:

1 Second style <class= "Overlay-gradient-tall-dark"></ Div >

1 Third style <class= "Overlay-gradient-short"></  div>

1 last style (recommended)<class= "Overlay-full"></Div >