标签:
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); }
标签:
原文地址:http://www.cnblogs.com/danranysy/p/4735101.html