深入了解opacity和rgba

 

1. rgba

首先它是一个属性值，语法为rgba（r,g,b,a）
- r为红色值， 正整数 | 百分数
- g为绿色值，正整数 | 百分数
- b为蓝色值，正整数 | 百分数
- a为alpha（透明度），值为0 ~ 1之间的小数， 0.0 （完全透明）到 1.0（完全不透明）
- 上面的正整数为十进制0 ~ 255之间的任意值，百分数为0% ~ 100%之间的任意值

2. opacity

opacity是一个属性，并非是属性值。

使用方法为:opacity:0~1；

俩者之间最大的区别在于：opacity属性的值，可以被其子元素继承。而RGBA后代元素不会继承不透明属性。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>opacity和rgba</title>
 6     <style>
 7         .opacity{width:100px;height:100px;background: red;opacity: 0.5}
 8         .rgba{width:100px;height:100px;background:rgba(255,0,0,0.5);}
 9     </style>
10 </head>
11 <body>
12     <div class="opacity">
13         <p>hello world1</p>
14     </div>
15     <div class="rgba">
16         <p>hello world2</p>
17     </div>
18 </body>
19 </html>

输出结果：不难看出，rgba的p元素文本内容没有被设置为透明

当我们需要制作透明的边框时 ，就使用ragb颜色，当我们需要背景图片透明时，需要使用alpha属性，当然，背景图片上的内容的透明度也会随之改变。

posted @ 2019-05-30 21:01  给时光以生命  阅读(1071)  评论(0)  编辑  收藏  举报