CSS3에서 투명도를 조정하기 위해 RGBa를 사용하는 예
이 기사는 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]-->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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7488
15
1377
52
77
11
51
19
19
40
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)
Jun 28, 2022 pm 01:39 PM
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)
Jul 19, 2022 am 11:28 AM
이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.
공간을 차지하지 않고 CSS에서 요소를 숨기는 방법
Jun 01, 2022 pm 07:15 PM
두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.
CSS3에서 레이스 테두리를 구현하는 방법
Sep 16, 2022 pm 07:11 PM
CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.
텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!
Jun 10, 2022 pm 01:00 PM
텍스트 회전판과 이미지 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.
CSS3에서 마우스를 클릭하여 이미지를 확대하는 방법
Apr 25, 2022 pm 04:52 PM
구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".
win10 작업 표시줄 투명도 설정하는 방법을 가르쳐주세요
Jul 10, 2023 pm 12:37 PM
win10 시스템에는 상대적으로 새로운 기능이 많이 있습니다. 일부 친구는 win10 시스템을 더욱 개인화하고 싶어하므로 작업 표시줄 투명도를 더 멋지게 설정하려고 합니다. 그렇다면 win10 작업 표시줄의 투명도를 설정하는 방법은 무엇입니까? 아래 편집기는 win10 작업 표시줄의 투명도를 설정하는 방법을 알려줍니다. 구체적인 방법은 다음과 같습니다. 1. 컴퓨터를 켜고 마우스를 작업 표시줄로 이동한 다음 작업 표시줄을 마우스 오른쪽 버튼으로 클릭하고 창에서 "작업 표시줄 설정"을 찾아 클릭합니다. 2. "작업 표시줄 설정" 창을 클릭한 후 "색상" 옵션을 찾아 클릭합니다. "색상" 설정 인터페이스에서 원하는 작업 표시줄 색상을 설정하거나 색상을 사용자 정의할 수 있습니다. . 선택 색상을 선택한 후 아래의 "투명도 효과"를 찾으세요.
CSS 속성을 사용하여 투명도 그라디언트 효과를 얻는 방법
Nov 18, 2023 pm 05:28 PM
CSS 속성을 사용하여 투명도 그라데이션 효과를 구현하는 방법에는 특정 코드 예제가 필요합니다. 웹 디자인에서 투명도 그라데이션 효과는 페이지에 부드럽고 아름다운 전환 효과를 추가할 수 있습니다. CSS 속성 설정을 통해 다양한 요소의 투명도에 대한 전환 효과를 쉽게 얻을 수 있습니다. 오늘은 몇 가지 일반적인 방법과 구체적인 코드 예제를 소개하겠습니다. 불투명도 속성을 사용하십시오. 불투명도 속성은 요소의 투명도를 0에서 1까지 설정할 수 있습니다. 0은 완전히 투명함을 의미하고 1은 완전히 불투명함을 의미합니다. 우리는 통과할 수 있다
