CSS3의 rgba 란 무엇입니까?

rgba는 CSS3에서 색상을 정의하는 함수입니다. 구문은 "rgba(R,G,B,A)"이며 빨간색(R), 녹색(G), 파란색(B) 및 투명도(A)를 나타냅니다. 다양한 색상을 얻기 위해 서로 변경하고 중첩합니다. 매개변수 R, G, B의 값 범위는 "0~255"이고 A의 값 범위는 "0~1"입니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

RGB는 색상 표준으로 빨간색(R), 녹색(G), 파란색(B)이 변화하고 중첩되어 얻어지는 다양한 색상입니다. RGBA는 RGB를 기반으로 하며 알파 투명도를 제어하는 ​​매개변수를 추가합니다.

구문: ​​

rgba(R,G,B,A)

매개변수:

　R: 빨간색 값. 양의 정수 | 백분율

　G: 녹색 값. 양의 정수 | 백분율

　B: 파란색 값. 양의 정수 | 백분율

　A: 투명성. 값은 0에서 1 사이입니다

값 범위:

　　: Hue(색조). 0(또는 360)은 빨간색을 나타내고, 120은 녹색을 나타내고, 240은 파란색을 나타냅니다. 물론 다른 값을 사용하여 다른 색상을 결정할 수도 있습니다.

　　: 채도(채도). 값은 0%에서 100% 사이의 값입니다.

　: 밝기(밝기). 값은 0%에서 100% 사이의 값입니다.

　 값은 0과 1 사이입니다.

간단한 설명:

　 RGB 색상 모드("빨간색, 녹색 및 파란색"으로도 번역됨, 덜 일반적으로 사용됨)는 빨간색( R), 녹색(G), 파란색(B)을 중첩하여 다양한 색상을 얻습니다. RGB는 빨간색, 녹색, 파란색의 세 가지 색상을 나타냅니다. 이 표준에는 인간이 인식하는 거의 모든 색상이 포함됩니다. 시각은 인지할 수 있으며 현재 가장 널리 사용되는 색상 시스템 중 하나입니다.

　RGBA에는 RGB를 기반으로 알파 투명도를 제어하는 ​​추가 매개변수가 있습니다. 위의 세 가지 매개변수 R, G, B의 경우 양의 정수 값 범위는 0 - 255입니다. 백분율 값의 값 범위는 0.0% - 100.0%입니다. 범위를 벗어난 값은 가장 가까운 값 제한으로 반올림됩니다. 모든 브라우저가 백분율 값 사용을 지원하는 것은 아닙니다. 매개변수는 0에서 1 사이의 값을 가지며 음수가 될 수 없습니다.

브라우저 호환성:

Pang Tong이 RGBA를 사용하여 투명한 색상(투명한 배경색, 투명한 테두리 색상, 투명한 전경색 등)을 생성한다고 말했다면 누구나 불투명성을 생각할 수밖에 없습니다. 우리 CSS2에서 배경색을 만들 때 주로 사용하는데, 테두리색이나 전경색을 만들려고 하면 옆으로만 서있을 수 밖에 없고 무력합니다.

이제 RGBA와 Opacity의 비교 예를 살펴보겠습니다.

<div class="example-opacity">
  <p>Opacity效果</p>
  <ul>
   <li class="opacity opacity1">100%</li>
   <li class="opacity opacity2">80%</li>
   <li class="opacity opacity3">60%</li>
   <li class="opacity opacity4">40%</li>
   <li class="opacity opacity5">20%</li>
   <li class="opacity opacity6">0</li>
  </ul>
  <p>CSS3的RGBA效果</p>
  <ul>
   <li class="rgba rgba1">1</li>
   <li class="rgba rgba2">0.8</li>
   <li class="rgba rgba3">0.6</li>
   <li class="rgba rgba4">0.4</li>
   <li class="rgba rgba5">0.2</li>
   <li class="rgba rgba6">0</li>
 </ul>
</div>

이 두 ul의 li에 각각 관련 스타일을 적용합니다. 저는 CSS2와 li In에서 Opacity를 사용합니다. rgba 우리는 CSS3의 새로운 RGBA 속성을 사용합니다.

불투명도 스타일

li.opacity{
  float: left;
  width: 50px;
  height: 50px;
}
li.opacity1 {
   background: rgb(255,255,0);
   opacity: 1;
   filter:alpha(opaity=100);
}
li.opacity2 {
  background: rgb(255,255,0);
  opacity: 0.8;
  filter:alpha(opaity=80);
}
li.opacity3 {
  background: rgb(255,255,0);
  opacity: 0.6;
  filter:alpha(opaity=60);
}
li.opacity4 {
  background: rgb(255,255,0);
  opacity: 0.4;
  filter:alpha(opaity=40);
}
li.opacity5 {
  background: rgb(255,255,0);
  opacity: 0.2;
  filter:alpha(opaity=20);
}
li.opacity6 {
  background: rgb(255,255,0);
  opacity: 0;
  filter:alpha(opaity=0);
}

RGBA 샘플:

li.rgba {
  float: left;
  width: 50px;
  height: 50px;
}
li.rgba1 {
  background: rgba(255,255,0,1);
}
li.rgba2 {
  background: rgba(255,255,0,0.8);
}
li.rgba3 {
  background: rgba(255,255,0,0.6);
}
li.rgba4 {
  background: rgba(255,255,0,0.4);
}
li.rgba5 {
  background: rgba(255,255,0,0.2);
}
li.rgba6 {
  background: rgba(255,255,0,0);
}

효과를 살펴보겠습니다.

효과에서 알 수 있는 유일한 공통점은 배경색이 정확히 동일하다는 것입니다. 하지만 차이점은 모두가 항상 골치 아픈 문제는 Opacity의 하위 요소가 투명도를 갖게 되므로 투명도 값이 감소함에 따라 Opacity의 단어가 점점 더 불명확해진다는 것입니다. 그러나 RGBA는 그렇지 않습니다. 그런 문제.

(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS3의 rgba 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!