티스토리 뷰

CSS

[CSS] Opacity and Alpha

Dongi 2022. 1. 7. 14:17

안녕하세요 동기 여러분! 오늘은 색의 투명도를 설정하는 방법에 대해 알아봅시다.

 

Opacity and Alpha

투명도를 조절하는 방법에 대해 알아봅시다.

p {
  background-color: hsla(77, 100%, 50%, 0.1);
}
  • hsl에 a가 붙었습니다. 네~ 바로 이친구가 alpha입니다. 
  • alpha는 투명도를 조절하는 값인데 0부터 1까지의 소수점 숫자로 표현할 수 있습니다.
  • 숫자가 낮을 수록 투명해지고 높을 수록 진해집니다.
  • rgb로도 설정이 가능한데 그냥 rgb 뒤에 a를 붙여주면 됩니다. -> rgba(55, 55, 55, 0.5)

 

 

해봅시다.

HTML

<body>
  <div id="a1"></div>
  <div id="a2"></div>
  <div id="a3"></div>
</body>

CSS

body {
  background-color: hsla(34, 100%, 50%, 0.1);
}

#a1 {
  background-color: hsla(332, 50%, 50%, 0.5);
  width: 200px;
  height: 200px;
}

#a2 {
  background-color: hsla(225, 50%, 50%, 0.5);
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
}

#a3 {
  background-color: rgba(99, 150, 80, 0.8);
  position: absolute;
  width: 200px;
  height: 200px;
  top: 100px;
  left: 100px;
}
  • id가 a3인 div만 rgba로 색을 설정해보았습니다.

 

 

오늘의 느낌

CSS가 끝나면 뭘 공부할지 고민중인데 아마도 파이썬, 자바스크립트 복습을 좀 해야하지 않을까 생각중.

'CSS' 카테고리의 다른 글

[CSS] Text Layout  (0) 2022.01.08
[CSS] Text Transformation  (0) 2022.01.08
[CSS] Hue, Saturation, and Lightness  (0) 2022.01.07
[CSS] Clear  (0) 2022.01.06
[CSS] Float  (0) 2022.01.06
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함