码迷,mamicode.com
首页 > Web开发 > 详细

CSS中opacity和rgba的区别是什么?

时间:2018-04-10 17:40:35      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:

本文和大家分享的主要是css中与透明度有关的两个属性opacityrgba,主要围绕这两个css属性的区别和注意事项来说,希望对大家学习css有所帮助。
语法
1. rgba
首先它是一个属性值,语法为rgbar,g,b,a
- r为红色值, 正整数 百分数
- g为绿色值,正整数 百分数
- b为蓝色值,正整数 百分数
- aalpha(透明度),值为0 ~ 1之间的小数, 0.0 (完全透明)到 1.0(完全不透明)
上面的正整数为十进制0 ~ 255之间的任意值,百分数为0% ~ 100%之间的任意值
// 例子:.box1{
// 不限于背景颜色,可以是文字颜色,阴影等
background: rgba(0,0,255,0.4);
}
2. opacity
opacity是一个属性,而非一个属性值,语法为 :
opacity: value|inherit;
value:不透明度,从 0.0 (完全透明)到 1.0(完全不透明)
//例子.box2{
background: rgb(0,0,255);
opacity:0.4;
}
不同之处
· opacity属性的所有后代元素都会继承 opacity 属性,而RGBA后代元素不会继承不透明属性
· 看看下面效果:
//部分代码.box1{
background: rgba(0,0,255,0.4);
}.box2{
background: rgb(0,0,255);
opacity:0.4;
}

我们从效果图中不难看出,
- rgba只是背景颜色有透明效果
而有opacity属性元素的后代都会继承这个透明属性,包括但不限于文字图片等
来源:网络

CSS中opacity和rgba的区别是什么?

标签:

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
wjunxi
加入时间:2017-06-15
  关注此人  发短消息
文章分类
wjunxi”关注的人------(0
wjunxi”的粉丝们------(0
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!