CSS3에서 투명도를 조정하기 위해 RGBa를 사용하는 예
- 高洛峰원래의
- 2017-03-20 10:45:322460검색
이 기사는 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); }투명도 추가 전과 후의 효과는 다음과 같습니다. (투명도 효과를 좀 더 명확하게 반영하기 위해 예제의 본문에는 배경 텍스처가 있습니다.)
보시다시피 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='#34343432', endColorstr='#34343432');
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>具体效果
可以看出，opacity 会使其中的子元素 span 同时变为半透明的效果，而 RGBa 则只改变被设置的元素的透明度，而在大多数情况下，开发者只需要设置当前元素的透明度（如遮罩，半透明背景等），因此使用 RGBa 会更加的灵活。
另外，在 IE9 中，直接使用 RGBa 颜色与使用 opacity 设置透明的效果会有差异（读者可以在 IE9 下浏览 Demo 查看具体的效果），开发者需要注意这一点差异。
相关文章：
위 내용은 CSS3에서 투명도를 조정하기 위해 RGBa를 사용하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!