rgba和 opacity的异同

rgba和 opacity都是用于是页面透明的属性。

rgba()表示 红 绿 蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数,“可以让制定的颜色透明化”(rgb()上扩展的,其只可以设置颜色,而不能使设置的颜色透明化)。
例子:rgba(55,146,179,.5) ; //rgb值为“55,146,179”,.5使设定的rgb值为50%透明,1为完全不透明,0为完全透明

opacity属性是css3的属性,也可以实现透明效果
例子:opacity:.65; //1为完全不透明,0为完全透明

rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或其背景色

两种都不被IE支持(IE9开始支持)

不禁联想到之前做透明效果的按钮时的体验,那时候一直用的是opacity,导致里面的文字也会呈现出一定程度的透明。真正合适的处理方式是按钮的背景使用rgba,就能达到背景透明,而文字不受影响。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值