css transparency properties Introduction

First, transparency settings

1. opacity
   Usage:
   opaticy: 0-1;

2.rgba
Usage:
RGBA: (0-255,0-255,0-255,0-1)
transparency values are between 0-1. Wherein 0 represents full transparency, represents a completely opaque.
NOTE: If the value is outside the range (less than 0 or greater than 1), it will take the nearest legal values. The press takes a display 1.2, 0 negated by the display.
For example:
HTML:

Here is box1

Here is box2

Here is box3

CSS:

(IMG)
will be the case on rgba opacity to look
`` `
CSS:
.box1 {width: 100px; height: 100px; background-Color: rgba (255, 0, 0,. 1);}
. {width BOX2: 100px; height: 100px; background-Color: RGBA (255, 0, 0, 0.5);}
.box3 {width: 100px; height: 100px; background-Color: RGBA (255, 0, 0, 0 );}
[image dump outer link fails, the source station may have security chain mechanism, it is recommended to save the picture down uploaded directly (img-JW0lzFqi-1583117743352) ( https://i.loli.net/2020/03/01/ Zr1d7BPEQ8MOsi3.png)]

Second, the transparency of the property

Carefully observe the two examples above, you will find opacity set to zero its internal text is not displayed, but rgba set to zero its internal text still shows.
We give elements set opacity, its internal elements, and parent elements will have the same transparency, when the parent element is zero transparency, the transparency of its internal elements are zero.
For example:

Here is box1

Here is box2

Here is box3

~~ \`\`\` (img)

We opacity may be understood as an element into a transparent glass, which is not visible when the transparent 0, a few different color elements stacked together can change the color of superimposed portions.
One thousand class front against the war, waiting for you to fight.