CSS의 rgba, rgb 및 불투명도 간의 차이점에 대한 자세한 그래픽 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 rgba, rgb 및 불투명도 간의 차이점에 대한 자세한 그래픽 설명

yulia

Oct 22, 2018 pm 03:17 PM

cssrgbrgba차이점

배경색, rgb, rgba 등 CSS에서 배경색을 설정하는 방법은 다양합니다. rgba, rgb 및 불투명도의 차이점을 알고 계십니까? 이 기사에서는 rgba, rgb 및 불투명도의 차이점에 대해 설명합니다. 관심 있는 친구는 이를 참조할 수 있습니다.

rgb와 rgba의 차이점:

rgb는 빨간색, 녹색, 파란색을 나타내며 0에서 255 사이의 값을 갖습니다. 예: 검정색은 rgb(0,0, 0)으로 나타낼 수 있습니다.

rgba는 다음을 나타냅니다. 빨간색, 녹색, 파란색, 투명도(불투명도)까지 투명도 값은 0~1 사이입니다

rgba와 rgb의 차이점은 rgba 설정이 가능하다는 점입니다. 배경색인 rgb의 투명도는 허용되지 않습니다

예 1: 배경 사용: 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 및 불투명도 간의 차이점에 대한 자세한 그래픽 설명

예 2: 배경 사용: 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 및 불투명도 간의 차이점에 대한 자세한 그래픽 설명

rgba()와 불투명도의 차이점:

둘 다 투명 효과를 설정할 수 있지만 불투명도 속성은 요소에 작용하며 하위 요소와 같은 요소 내부의 모든 요소에 대해 작동합니다. 요소의 경우 rgba는 자체적으로만 작동하며 하위 요소에서는 작동하지 않습니다. 구체적인 차이점은 렌더링을 비교하십시오.

예 3: 불투명도: 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 및 불투명도 간의 차이점에 대한 자세한 그래픽 설명

렌더링에서 rgba, rgb 및 불투명도의 차이를 확인할 수 있습니다. 배경색은 투명도를 설정할 수 있으며 투명도는 내부 요소에 영향을 미치지 않습니다. 불투명도는 투명도를 설정할 수 있지만 투명도는 내부 요소에 영향을 미칩니다.