对于设置度,我们有两个可以选的css3属性:rgba 和 opacity。这篇文章主要介绍了详解css度之rgba和opacity的区别及兼容,感兴趣的可以一起跟随小编来了解一下

对于设置度,我们有两个可以选的css3属性:rgba 和 opacity

opacity

用法:

#box{
    background-color:rgb(125,25,0);
    opacity: 0.5
}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定度。

opacity 属性能够设置的值从 0.0 到 1.0。值越小,越

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越

所以如果项目为了要兼容IE8及以下,则需要写两段代码

#box{
    background-color:rgb(125,25,0);
    opacity: 0.5;
    filter:alpha(opacity=50); /* 针对 IE8 以及更早的版本 */
}

RGBA

用法:

#box{
    background-color: rgba(0, 0, 0, .5);
}

RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不度。

RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全)与 1.0(完全不)的数字。

那么对于IE8及以下需要做以下兼容:

#box{
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);
}

其中:#88000000 的前两位数字控制度,取值16进制从00 -> FF(越小越),00表示完全,FF就是全不,后面六位是色值。

**※注意:

如果在IE9里面同时使用这RGBA两种方法时,会造成冲突而无法做到度的实现。
而对于opacity是可以两个一起写,没有冲突问题!**

opacity 和 rgba 的区别

为此我们设置了两个盒子来作为对比

html代码:

<div id="box1">
    <div class="pane"></div>
    box1-opacity演示效果
</div>
<div id="box2">
    <div class="pane"></div>
    box2-rgba演示效果
</div>

css代码:

#box1{
    width: 100px;
    height: 100px;
    color:black;
    background-color:rgb(125,25,0);
    opacity: 0.5;
}
#box2{
    margin-top: 10px;
    width: 100px;
    height: 100px;
    color:black;
    background-color: rgba(125,25,0, .5);
}
.pane{
    width: 20px;
    height: 20px;
    background-color:red;
}

结果如图:

从上面的结果我们可以看到 opacity 可以影响字体以及红色小方块的度,而 rgba 不会。

说明了子元素会继承父元素的 opacity 属性

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
截至23点 快手春晚互动量437亿次超去年208亿次

截至23点 快手春晚互

截至24日23点,全球观众参与快手前三轮红包互动累计达43
遭美国防部反对 美商务部撤回美企对华为限制措施

遭美国防部反对 美商

华尔街日报援引消息人士称,因遭到美国防部和财政部反对
支付宝五福开奖超3亿人分5亿 大多分到1.68元

支付宝五福开奖超3亿

根据支付宝开奖信息显示,今年共有超过3亿人集齐了五福,3
斗鱼向武汉防疫一线捐款1000万 其总部位于武汉

斗鱼向武汉防疫一线捐

总部位于湖北武汉的斗鱼今日宣布向武汉防疫一线捐款10
途家升级退改政策 将为武汉医务人员提供免费住宿

途家升级退改政策 将

针对新型冠状病毒肺炎疫情,途家在推出民宿订单退改政策
腾讯基金会捐赠3亿元人民币 紧急驰援肺炎疫情

腾讯基金会捐赠3亿元

腾讯公益慈善基金会宣布捐赠3亿元人民币,设立第一期新
最新文章
针对class、id所做的CSS HACK

针对class、id所做的C

这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK
WEB标准教程:P标签的应用

WEB标准教程:P标签的

从今天开始,我将全面的共享出我所能理解的所有WEB标准
Web前端开发的Firefox插件

Web前端开发的Firefox

一、Web DeveloperWeb Developer 可说是网页设计师最
详解CSS粘性定位 sticky

详解CSS粘性定位 stic

这篇文章主要介绍了CSS粘性定位 sticky 的相关知识,本
详解css透明度之rgba和opacity的区别及兼容

详解css透明度之rgba

对于设置透明度,我们有两个可以选的css3属性:rgba 和 op
轻松搞懂CSS浮动与清除浮动图文详解

轻松搞懂CSS浮动与清

本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮