CSS透明效果的实现的三种方式

本文介绍: 三种方式分别是：opacity、rgba、transparent那么p a ci ty、rgba、transparent都可以设置透明的时候，几者的区别是什么？

三种方式分别是：opacity、rgb a、transparent
那么p a ci ty、rgb a、transparent都可以设置透明的时候，几者的区别是什么？

一、

opacity是样式名，通过样式值的不同设置透明效果
rgba、transparent是样式值，必须跟在特定的样式名后，才可以设置透明效果

二、

opacity 可以给任何元素设置透明效果，就像在元素前面加一个模糊镜子一样

三、

3、opacity 具有继承性，rgba、transparent不具有继承

代码如下：

&lt;!DOCTYPE html&gt;
<html lang="en"&gt;
 <head&gt;
   <meta charset="UTF-8" /&gt;
   <meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
   <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
   <title&gt;Document</title&gt;
 </head>
 <!-- 面试题：opacity、rgba、transparent
          都可以设置透明的时候，几者的区别是什么？ 
   1、  opacity是样式名，通过样式值的不同设置透明效果
 rgba、transparent是样式值，必须跟在特定的样式名后，才可以设置透明效果
 2、opacity可以给任何元素设置透明效果，就像在元素前面加一个模糊镜子一样
 rgba、transparent只能给背景色，颜色等特定的元素设定
 3、opacity具有继承性，rgba、transparent不具有继承
   -->
 <body>
   <!-- 用opacity设置透明度 -->
   <p style="background-color: red; opacity: 0.6">
     （3）这是一个p标签，颜色red，opacity值为0.6
     <span style="background-color: green"> 这是一个span标签，颜色green，opacity未设置 </span>
   </p>
   <!-- 用rgba设置透明度 -->
   <p style="background-color: rgba(255, 0, 0, 0.6)">
    （3）这是一个p标签，颜色red，透明度为0.6
     <span style="background-color: green">（这是一个span标签，颜色green，透明度未设置）</span>
   </p>
 </body>
</html>