码迷,mamicode.com
首页 > 其他好文 > 详细

opacity与rgba

时间:2015-08-16 22:51:14      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:

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);
}

 

opacity与rgba

标签:

原文地址:http://www.cnblogs.com/danranysy/p/4735101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!