温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS中rgba,rgb和opacity间的区别是什么

发布时间:2022-03-10 16:11:47 来源:亿速云 阅读:245 作者:iii 栏目:web开发

这篇文章主要介绍“CSS中rgba,rgb和opacity间的区别是什么”,在日常操作中,相信很多人在CSS中rgba,rgb和opacity间的区别是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS中rgba,rgb和opacity间的区别是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!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)设置背景颜色为半透明红色

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.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设置透明度,代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<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间的区别是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI