图文详解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)设置背景颜色为红色



 
  
  
  
 
 
  

效果图:

图文详解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设置透明度,代码如下:



  
我是盒子里面的内容,文字不需要透明

效果图:

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

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

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


当前题目:图文详解CSS中rgba,rgb和opacity之间的区别有哪些-创新互联
文章URL:http://myzitong.com/article/cddoce.html