HTML | CSS
[CSS] background-color 반투명 및 그라데이션 효과
멈머이
2024. 1. 19. 00:21
728x90
원하는 결과물 : 사이드바에서 반투명의 배경색과 불투명 글씨 그리고 불투명한 사이드바 버튼.
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까지 증가
728x90