[CSS] background-color 반투명 및 그라데이션 효과

원하는 결과물 : 사이드바에서 반투명의 배경색과 불투명 글씨 그리고 불투명한 사이드바 버튼.

---

1. opacity 적용

  background-color: darkgreen;
  opacity: 0.3;

보통 요소를 반투명 또는 투명하게 만들기 위해서는 opacity 속성을 사용한다.

하지만 위의 그림과 같이 하위의 모든 요소들이 투명해져 버렸다.

---

2. rgba(#, #, #, 0.7) RGB값과 투명속성 이용

background-color: rgba(57, 114, 57, 0.7);

rgba(57, 114, 57, 0.7)

57 : red / 114 : green / 57 : blue / 0.7 : 투명도

투명도는 0이 투명 1이 불투명으로 0부터 1사이의 값을 사용한다.

* opacity와 동일

---

3. 자연스러움을 위해 그라데이션 적용

background: linear-gradient(to top, rgba(57, 114, 57, 0.7) 0%, rgba(57, 114, 57, 0) 100%);

사이드바의 맨 위부분이 칼같이 나누어져 예쁘지 않기 때문에 그라데이션 효과를 주어 자연스럽게 이어지도록 구현했다.

to top, rgba(57, 114, 57, 0.7) 0%, rgba(57, 114, 57, 0) 100% : 상단부터 투명도 0 ~> 100까지 증가