opacity和rgba()

以下是我最近在仿站时的一点小收获,不喜勿喷。

rgba:

语法:rgba(R,G,B,A) ;

R:红色值。正整数 | 百分数(0—255)

G:绿色值。正整数 | 百分数(0—255)

B:蓝色值。正整数  | 百分数(0—255)

A:Alpha透明度,取值为0—1。

正整数为十进制的0—255之间的任意值,百分数为0%—100%的任意值。


Opacity:

语法:opacity : value | inherit ;

value:不透明度,从0(完全透明)—1(完全不透明)。

区别:

opacity和rgba()都可以设置透明度,但opacity在设置透明度时会被其子元素继承,举个例子:

分别用opacity和rgba设置背景的透明度,显示出的效果如下:


上面一个是opacity设置的显示出来的结果,由于opacity会被子元素<p>继承,所以字也变透明了,而下方那个是rgba设置的,只有背景颜色变透明了。所以在设置背景透明度时如果不希望其子元素也透明,建议用rgba()设置。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值