배경색을 투명하게 만드는 방법에 대해 알아보자.
See the Pen Untitled by 날개를달다 (@pmdgstri-the-flexboxer) on CodePen.
opacity
단어 뜻마저 불투명인 대표적인 투명 관련 속성이다.
색이 들어가는 곳이라면 대부분 사용가능한걸로 알고 있다.
특징은 opacity속성을 지정하면 하위 속성들도 다 불투명해진다.
rgba
색상을 정의할때 투명도를 포함하여 색상을 정의해준다.
말 그대로 색상을 투명하게 하기때문에 해당 색상만 불투명해진다.
rgba는 rgb와 3가지 인자와 함께 a(alpha)값을 인자로 받는데 0부터 1까지 입력받는다.
0은 완전투명 1은 완전불투명을 뜻한다.
특정한 색만 불투명하게 변경하고 싶다면 색상을 rgba로 지정해주면 된다.
※ 필자는 HTML Color를 많이 사용해서 rgb로 변경시킬때 아래 사이트의 도움을 받았다.
그런데 아래 사이트가 요즘 좀 접속이 불안하다.
혹시 다른 사이트 아는사람이 있으면 댓글로 추천 부탁드립니다.
HTML Color Codes - What's your color
Join to access discussion forums and premium features of the site.
www.hexcolortool.com
관련글
| 날다의 운영환경 | |
|---|---|
| 본체 | DeskTop |
| O S | Windows11 Pro |
| Browser | Google Chrome |
'CSS' 카테고리의 다른 글
| [CSS] 하이퍼링크(a href) 밑줄 없애기 또는 변경하기 (0) | 2025.01.13 |
|---|---|
| [CSS] 하이퍼링크(a href) 글자 색상 변경하기 (0) | 2025.01.13 |
| [CSS] HTML에서 자주 쓰이는 특수문자 표로 정리( < , > , 공백, 큰따옴표) (0) | 2025.01.09 |
| [CSS] margin, padding 설정 하기 (한줄로 적기 순서) (0) | 2025.01.07 |
| [CSS] Font-weight (글씨 굵기) 속성 자세히 알아보기 (2) | 2025.01.06 |