图文详解CSS中rgba，rgb和opacity之间的区别有哪些-创新互联

小编给大家分享一下图文详解CSS中rgba，rgb和opacity之间的区别有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联主营左云网站建设的网络公司,主营网站建设方案,重庆APP开发公司,左云h5小程序制作搭建,左云网站营销推广欢迎左云等地区企业咨询

rgb和rgba的区别：

rgb就是指红色（red），绿色（green）、蓝色（blue），取值在0到255之间，比如：黑色可以表示为rgb(0,0,0)

rgba是指红色（red），绿色（green）、蓝色（blue），透明度（opacity），透明度的取值在0到1 之间

rgba和rgb的区别在于，rgba可以设置背景颜色的透明度，rgb不可以

举例1：用 background: rgb(255,0,0)设置背景颜色为红色

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{
    width: 300px;
    height: 200px;
    position: relative;
    border: 1px solid black;
   }
   .a2{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: rgb(255,0,0);
   }
  </style>
 </head>
 <body>
  <div class="a1"></div>
  <div class="a2"></div>
 </body>
</html>

效果图：

图文详解CSS中rgba，rgb和opacity之间的区别有哪些

举例2：用background: rgba(255,0,0,0.5)设置背景颜色为半透明红色

.a1{
    width: 300px;
    height: 200px;
    position: relative;
    border: 1px solid black;
   }
   .a2{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: rgba(255,0,0,0.5);
   }

效果图：

图文详解CSS中rgba，rgb和opacity之间的区别有哪些

rgba()和opacity的区别：

两者都可以设置透明效果，但是opacity属性会作用于元素和元素里面的所有元素，比如子元素，rgba只会作用于它本身，不会作用于子元素上，具体区别请对比效果图。

举例3：用opacity: 0.5设置透明度，代码如下：

<style type="text/css">
   .a1{
    width: 300px;
    height: 200px;
    position: relative;
    border: 1px solid black;
   }
   .a2{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: red;
    opacity: 0.5;
   }
</style>
<body>
  <div class="a1"></div>
  <div class="a2">我是盒子里面的内容，文字不需要透明</div>
</body>

效果图：

图文详解CSS中rgba，rgb和opacity之间的区别有哪些

从效果图中可以看出rgba，rgb和opacity之间的区别，rgb只可以设置背景颜色；rgba可以设置透明度，且透明度不会作用在里面的元素上，opacity可以设置透明度，但透明度会作用在里面的元素上。

以上是图文详解CSS中rgba，rgb和opacity之间的区别有哪些的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站制作公司行业资讯频道！

网站题目：图文详解CSS中rgba，rgb和opacity之间的区别有哪些-创新互联
转载来于：https://www.cdcxhl.com/article24/cddoce.html

成都网站建设公司_创新互联，为您提供网站排名、品牌网站制作、App开发、网页设计公司、营销型网站建设、网站维护

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容