opacity与rgba

opacity与rgba实现透明：opacity背景透明，子元素也透明，并且不能设置边框、文字透明特效；rgba所有涉及颜色的都可以设置透明

html:

<ul>
    <li class="opacity opacity1">100%</li>
    <li class="opacity opacity2">80%</li>
    <li class="opacity opacity3">60%</li>
    <li class="opacity opacity4">40%</li>
    <li class="opacity opacity5">20%</li>
    <li class="opacity opacity6">0</li>
</ul>

<ul>
    <li class="rgba rgba1">100%</li>
    <li class="rgba rgba2">80%</li>
    <li class="rgba rgba3">60%</li>
    <li class="rgba rgba4">40%</li>
    <li class="rgba rgba5">20%</li>
    <li class="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);/*兼容ie5-7*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";/*兼容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: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);
}