• 회원가입
  • 로그인
  • 구글아이디로 로그인

[func] CSS - rgba() 함수 ★ - (빨강,녹색,파랑,불투명도)으로 색상 정의. (= rgba함수 = 알지비에이함수)

목차

  1. rgba() 예제 - (빨강,녹색,파랑,불투명도)으로 색상 정의
  2. rgba() 정의
  3. rgba() 구문

 

rgba() 예제 - (빨강,녹색,파랑,불투명도)으로 색상 정의

 

<style>

p {background-color:rgba(255,0,0,0.3);}

</style>

 

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기

 

rgba() 정의

 

RGBA 모델 사용해 색상 정의.

Red (빨강), Green (녹색), Blue (파랑), Alpha (불투명도)

 



1.

기본 사용법은 rgb() 함수와 유사
https://homzzang.com/b/css-275
다만, 알파 (Alpha 불투명도) 개념 추가.

 

2.

CSS3

 

3.

IE 9 이상 주요 최신 브라우저 지원.

 

 

rgba() 구문

 

rgba(red, green, blue, Alpha)

 


[매개변수]


red

빨강 강도 : 0 ~ 255 정수 (또는, 0% ~ 100% 백분율)

 

green 

녹색 강도 : 0 ~ 255 정수 (또는, 0% ~ 100% 백분율)


blue 

파랑 강도 : 0 ~ 255 정수 (또는, 0% ~ 100% 백분율)

 

alpha

불투명 정도:  0.0 1.0 (※ 숫자 커질수록 불투명도 ↑)




분류 제목
selector CSS - :visited 가상선택자 ★ -이미 방문한 링크 선택 (= 읽은글/방문글/확인글 표시 = 비지티…
selector CSS - :hover 가상선택자 ★ - 요소에 마우스커서위치시 효과 (= :hover선택자 = 허버선택자,…
selector CSS - :active 가상선택자 - 링크클릭순간 (= 액티브선택자, 링크선택자)
selector CSS - :focus 선택자 - 포커스 된 요소 선택 (= :focus선택자 = 포커스선택자) (IE8…
selector CSS - ::first-letter 가상선택자 - 요소의 첫번째글자 선택 (= ::first-letter선…
selector CSS - ::first-line 가상선택자 - 요소의 첫번째라인 선택 (= ::first-line선택자 =…
selector CSS - :first-child 가상선택자 - 그부모요소의 첫번째자식요소 (= 퍼스트차일드선택자, IE7)
selector CSS - ::before 가상선택자 - 요소 앞에 내용삽입 (= ::before선택자 = 비포어선택자/비…
selector CSS - ::after 가상선택자 ★ - 요소 뒤에 내용삽입 (= ::after선택자 = 에프터선택자/애프…
selector CSS - :lang(language) 가상선택자 - 특정언어속성요소 (= 언어선택자 = 랭선택자, IE8)
intro CSS - inherit (인헤리트) - 상속개념 ★
background CSS - background 속성 ★ - 배경 일괄 (= background속성 = 백그라운드속성)
background CSS - background-color 속성 ★ - 배경색깔(=배경색상=배경컬러 = background-c…
background CSS - background-image 속성 ★ - 배경이미지 (= background-image속성 = …
background CSS - background-repeat 속성 ★ - 배경이미지 반복 (= 배경반복 = background…
background CSS - background-attachment 속성 - 배경이미지 고정 (= background-atta…
background CSS - background-position 속성 = 배경위치 (= background-position속성…
border CSS - border 속성 ★ - 테두리일괄 (= border속성 = 보더속성) (상속X)
border CSS - border-style 속성 ★ - 테두리모양일괄 (= border-style속성 = 보더스타일속…
border CSS - border-width 속성 - 테두리두께일괄 (= 테두리너비일괄 = border-width속성 …
2/25
목록
찾아주셔서 감사합니다. Since 2012