css基础--深入理解opacity和rgba的区别

欢迎访问我的个人博客:http://www.xiaolongwu.cn

前言

首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看

语法

1. rgba

首先它是一个属性值,语法为rgba(r,g,b,a)
- r为红色值, 正整数 | 百分数
- g为绿色值,正整数 | 百分数
- b为蓝色值,正整数 | 百分数
- a为alpha(透明度),值为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;
}

opacity和rgba的区别效果图

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


我的个人博客:http://www.xiaolongwu.cn

如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。

邮箱:wuxiaolong802@163.com

  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值