Opacity and Rgba transparent: opacity background transparent, child elements are also transparent, and can not set the border, text transparency effect; Rgba all color-related can be set transparent
Html:
<ul> <Liclass= "Opacity opacity1">100%</Li> <Liclass= "Opacity Opacity2">80%</Li> <Liclass= "Opacity Opacity3">40g</Li> <Liclass= "Opacity Opacity4">60g</Li> <Liclass= "Opacity Opacity5">20%</Li> <Liclass= "Opacity Opacity6">0</Li></ul><ul> <binclass= "Rgba rgba1">100%</Li> <Liclass= "Rgba rgba2">80%</Li> <Liclass= "Rgba rgba3">60%</Li> <Liclass= "Rgba rgba4">60g</Li> <Liclass= "Rgba rgba5">20%</Li> <Liclass= "Rgba Rgba6">0</Li></ul>
Css:
. Opacity{float: Left;width:50px;Height:50px;}. Opacity1{background:RGB (255,255,0);Opacity:1;Filter:Alpha (opacity=100);/* Compatible ie5-7*/-ms-filter:"Progid:DXImageTransform.Microsoft.Alpha (opacity=100)";/* Compatible with ie8*/}. Opacity2{background:RGB (255,255,0);Opacity:0.8;Filter:Alpha (opacity=80);-ms-filter:"Progid:DXImageTransform.Microsoft.Alpha (opacity=80)";}. Opacity3{background:RGB (255,255,0);Opacity:0.6;Filter:Alpha (opacity=60);-ms-filter:"ProgID. DXImageTransform.Microsoft.Alpha (opacity=60) ";}. Opacity4{background:RGB (255,255,0);Opacity:0.4;Filter:Alpha (OPACITY=40);-ms-filter:"Progid:DXImageTransform.Microsoft.Alpha (opacity=40)";}. Opacity5{background:RGB (255,255,0);Opacity:0.2;Filter:Alpha (OPACITY=20);-ms-filter:"ProgID. DXImageTransform.Microsoft.Alpha (opacity=20) ";}. Opacity6{background:RGB (255,255,0);Opacity:0;Filter:Alpha (opacity=0);-ms-filter:"ProgID. DXImageTransform.Microsoft.Alpha (opacity=0) ";}}.rgba{float: Left;width:50px;Height:50px;}. Rgba1{background:RGB (255,255,0)/*fallback background color to be compatible with the unavailable */background:RBGA (255,255,0,1);Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=1;startcolorstr= #ffffff00; endcolorstr= #ffffff00)/*ie5s*/-ms-filter:"Progid:DXImageTransform.Microsoft.gradient (gradienttype=1;startcolorstr= #ffffff00; endcolorstr= #ffffff00) ";/*ie8*/}. Rgba2{background:RBGA (255,255,0,0.8);}. Rgba3{background:RBGA (255,255,0,0.6);}. RGBA4{background:RBGA (255,255,0,0.4);}. Rgba5{background:RBGA (255,255,0,0.2);}. Rgba6{background:RBGA (255,255,0,0);}
Opacity and Rgba