CSS Learning (15th)-CSS color mode and CSS color transparency

CSS Learning (15th)-CSS color mode and CSS color transparency
I. theory:
1. CSS3 color mode
A. RGBA color mode. The alpha transparency control parameter is added based on RGB.
B. HSL color mode: color saturation brightness
C. HSLA color mode: the value of A is between 0 and 1. The greater the value, the lower the transparency.
2. RGBA/HSLA filter format
A. you must use a conversion tool to use the same transparency in the RGBA/HSLA color mode in ie8 and earlier versions. You must multiply the transparency value in RGBA/HSLA by 255, convert it to a hexadecimal value.

Ii. Practice:

1.

 

Invalid.

 

<meta charset="UTF-8"><title>Title</title><style type="text/css">        .row{            overflow: hidden;        }        .row div{            width: 80px;            height: 80px;            line-height: 80px;            text-align: center;            float:left;        }        .row:nth-of-type(1) div {            background: hsl(133,100%,80%);        }        .row:nth-of-type(2) div {            background: hsl(133,80%,80%);        }        .row:nth-of-type(3) div {            background:  hsl(133,60%,80%);        }        .row:nth-of-type(4) div{            background: hsl(133,50%,80%);        }        .row div:nth-child(1){            background: hsl(33,100%,70%);        }        .row div:nth-child(2){            background: hsl(33,90%,70%);        }        .row div:nth-child(3){            background: hsl(33,80%,70%);        }        .row div:nth-child(4){            background: hsl(33,70%,70%);        }        .row div:nth-child(5){            background: hsl(33,60%,70%);        }        .row div:nth-child(6){            background: hsl(33,50%,70%);        }        .row div:nth-of-type(1) div {            background: hsl(33,100%,70%);        }</style><div>            1</div><div>            0.8</div><div>            0.6</div><div>            0.4</div><div>            0.2</div><div>            1</div><div>            0.8</div><div>            0.6</div><div>            0.4</div><div>            0.2</div><div>            1</div><div>            0.8</div><div>            0.6</div><div>            0.4</div><div>            0.2</div><div>            1</div><div>            0.8</div><div>            0.6</div><div>            0.4</div><div>            0.2</div><div>            1</div><div>            0.8</div><div>            0.6</div><div>            0.4</div><div>            0.2</div><!--!doctype-->