CSS3에서 투명도를 조정하기 위해 RGBa를 사용하는 예-CSS 튜토리얼-php.cn

CSS3에서 투명도를 조정하기 위해 RGBa를 사용하는 예

高洛峰

풀어 주다： 2017-03-20 10:45:32

원래의

2509명이 탐색했습니다.

이 기사는 CSS3에서 투명도를 조정하기 위해 RGBa를 사용하는 방법에 대한 튜토리얼을 주로 소개합니다. RGBA는 RGB 색상 모델 의 확장입니다. 빨간색, 녹색, 파란색의 문자와 알파 값은 색상의 투명도 또는 불투명도를 나타냅니다. 필요한 친구는

을 참조할 수 있습니다. CSS3에는 불투명도

속성이 추가되었습니다. , 개발자가 요소의 투명도를 설정할 수 있습니다. 이제 불투명도는 주류 최신 브라우저에서 지원되지만 불투명도는 설정된 요소와 해당 하위 요소를 동시에 동일한 투명도로 설정합니다. 이러한 투명도 규칙은 매우 유연하지 않으며 종종 실제 개발에 많은 어려움을 겪습니다. 실제로 CSS3에는 또 다른 색상 투명도 솔루션인 RGBa가 있습니다. 불투명도와 비교하여 RGBa는 하위 요소에 영향을 주지 않고 단일 요소에 투명도를 설정할 수 있습니다. 그러나 RGBa의 브라우저 지원은 불투명도만큼 광범위하지 않으므로 개발자의 관심을 상대적으로 덜 끌었습니다. RGBA(R,G,B,A)

값:

R: 빨간색 값. 양수
정수
| 백분율G: 녹색 값입니다. 양의 정수 | 백분율B: 파란색 값. 양의 정수 | 백분율
A: 알파 투명도. 값은 0~1 사이입니다.
다음은 rgba()를 사용하여 투명도를 50%로 설정한 흰색입니다.

p {   
color: rgba(255, 255, 255, 0.5);   
}

로그인 후 복사

RGBA는 RGB 색상 모델의 확장입니다. 이 약어는 빨간색, 녹색, 파란색의 세 가지 기본 색상의 첫 글자를 나타내며 알파 값은 색상의 투명도/불투명도를 나타냅니다.

다음은 RGBa 색상에 대한 자세한 소개입니다.

1. RGBa 색상 기준

RGBa는 기본적으로 설정된 요소에 알파 채널, 즉 빨간색, 녹색, 파란색의 세 가지 색상 채널을 추가합니다. 투명도를 나타내는 채널로, RGB 값은 0부터 255까지의 친숙한 세 정수를 사용하여 각각 빨간색, 녹색, 파란색을 나타내고 알파 값은 0부터 1(소수점 한 자리)까지입니다. 다음은 구체적인 사용법을 보여주는 예입니다.
CSS 2.1에서는 RGB 색상 선언 사용이 지원됩니다(개발자는 #343434와 같은 16진수 표현을 사용하는 데 더 익숙할 수 있지만). 예제의 ID를 가진 p 요소의 배경색 #343434를 사용하려면

/* RGB 表示方式 */
#example {background: rgb(52, 52, 52); }

로그인 후 복사

를 쓴 다음 RGBa를 사용하여 예제의 배경색을 0.5 투명도로 변경할 수 있습니다.

/* 设置 0.5 透明度 */
#example-a {background: rgba(52, 52, 52, 0.5); }   
/* 也可以省略小数点前的 0 */
#example-a {background: rgba(52, 52, 52, .5); }

로그인 후 복사

투명도 추가 전과 후의 효과는 다음과 같습니다. (투명도 효과를 좀 더 명확하게 반영하기 위해 예제의 본문에는 배경 텍스처가 있습니다.)

CSS3에서 투명도를 조정하기 위해 RGBa를 사용하는 예 보시다시피 RGBa는 원래 RGB에 매개변수를 추가한 것뿐이지만 이러한 변화는 작지만 개발자에게 큰 편의성을 제공합니다.

또한 배경 속성 외에도 RGBa를 색상 및

순서

속성에서 사용할 수 있습니다(참고: Firefox에서 테두리 속성으로 RGBa를 사용하는 것은 다음과 다릅니다. 다른 브라우저에서는 효과가 약간 다릅니다).

2. 브라우저 지원 및 점진적인 개선

RGBa는 주류 최신 브라우저에서 좋은 지원을 받았지만 RGBa에 대한 Webkit 지원은 가장 초기에 이루어졌습니다.
Chrome은 최소한 0.415 버전부터 RGBa를 지원하기 시작했습니다. 이런 점에서 Chrome은 매우 강력하다고 할 수 있습니다. 게다가 Gecko 및 Presto 커널도 IE 9부터 점차적으로 RGBa에 대한 지원을 구현했습니다. 보다 구체적인 브라우저 지원은 다음과 같습니다: Chrome 0.4.154.33+, Firefox 3.0+, Safari 3.2.1+, Opera 10.10+, IE9+

자세한 브라우저 지원은 여기를 참조하세요. .

RGBa를 지원하지 않는 브라우저의 경우 점진적인 향상 솔루션을 사용할 수 있습니다. Kayo는 예약된 색상을 지정하는 솔루션을 권장합니다. 우선, 개발자는 RGBa를 지원하지 않는 브라우저는 RGBa를 사용하는 CSS 속성 값을

구문 오류

로 처리하므로 CSS 속성 설정을 무시한다는 점을 알아야 합니다. 따라서 개발자는 브라우저가 RGBa를 지원하지 않을 때 색상이 전혀 없는 상황을 피하기 위해 RGBa 색상을 설정하기 전에 먼저 투명도를 사용하지 않는 속성을 설정할 수 있습니다. 다음은 위의 예를 확장한 설명입니다. #example1 {Background: rgb(52, 52, 52) background: rgba(52, 52, 52, .5); RGBa를 지원하지 않습니다. 브라우저는 두 번째 배경 속성 설정을 무시하고 첫 번째 속성 값에 따라 요소의 배경색을 설정합니다. 비록 브라우저 간의 효과가 동일할 수는 없지만 비슷한 효과를 얻었으며 좋은 점진적 향상 솔루션을 반영합니다. .

물론 IE의 경우 필터를 사용하면 RGBa를 지원하는 브라우저에서와 동일한 효과를 얻을 수 있습니다. 예를 들어 위의 예에서는 다음과 같이 코드를 작성할 수 있습니다.

<style type="text/css">   
    #example-a {background: rgba(52, 52, 52, .5); }   
</style>   
<!--[if IE]>   
    <style type="text/css">   
        #example-a {   
            background: transparent;   
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#34343432&#39;, endColorstr=&#39;#34343432&#39;);   
            zoom: 1;   
        }    
    </style>   
<![endif]-->

로그인 후 복사

여기에서 거울 필터는 위의 예와 동일한 색상과 투명도를 16진수로 사용한다는 점에 유의해야 합니다.

IE 会忽略 RGBa 颜色设置，并且根据 filter 滤镜设置颜色，这样的效果与 RGBa 的效果相同。

三. 不影响子元素
在文章的开头已经介绍过，RGBa 相对 opacity 的优势是不会影响其子元素，即可以单独为被设置的元素设置透明度，而子元素而不受该设置影响。下面再例举一个具体的例子，分别以 RGBa 和 opacity 为元素设置透明度说明两者的区别。

完整代码：

<!DOCTYPE HTML>   
<html lang="zh-CN">   
<head>   
    <meta charset="UTF-8">   
    <title>RGBa 与 opacity 效果的区别</title>   
    <style type="text/css">   
        body {padding-top: 200px; background: url(bg.png); }   
        #example, #example-a {width: 200px; height: 100px; margin: 0 auto; }   
        #example {background: rgb(52, 52, 52); opacity: 0.5; }   
        #example-a {margin-top: 20px; background: rgba(52, 52, 52, .5); }   
        .inside {display: block; width: 50px; height: 50px; margin-left: 10px; background: rgb(100, 140, 180); }   
    </style>   
</head>   
<body>   
    <p id="example">   

        <span class="inside"></span>   

    </p>   

    <p id="example-a">   

        <span class="inside"></span>   

    </p>   
</body>   
</html>

로그인 후 복사

具体效果
CSS3에서 투명도를 조정하기 위해 RGBa를 사용하는 예