opacity属性和rgba区别(css3新增属性rgba是什么)

Joker • • 前端笔记 • 249 阅读

今天我们主要学习下CSS3新增的rgba颜色模式rgba。

rgba是什么

rgba其实和我们常用的rgb颜色模式一样，只不过新多出的a代表透明的程度。

  • r Red红0-255

  • g Green绿0-255

  • b Blue蓝0-255

  • a Alpha透明0-1

使用起来就和rgb一样，比方说需要设置字体颜色可以是 color:rgba(0,0,0,1) 意思是黑色 不透明，可以把1改为0-1当中的任何数字来设置透明度。你也可以用rgba来设置其他的属性样式比如背景颜色 边框等。

实战


每天学习一点点
每天学习一点点

效果图如下

opacity属性和rgba区别

1、rgba颜色模式，个人理解是你设置颜色的时候可以直接设置透明度了。以前设置分隔线的时候需要加个opacity属性，现在一个rgba就可以把颜色和透明度一次性解决。所以在你既需要设置颜色又需要设置透明度的情况下，可以使用rgba颜色模式让你事半功倍；

2、rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）