[CSS] Opacity and Alpha

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