CSS: 배경 투명도 Opacity 조정할 때 텍스트는 그대로 유지하는 법: rgba 사용하기

부트스트랩을 쓰면서 opacity-75처럼 투명도를 조정하니까 텍스트까지 투명해져서 알아보게되었다.

background: rgba(3, 172, 240, 0.5);

정답은 rgba를 사용한다. 제일 뒤의 4번째 값이 투명도(Opacity) 조절이다.
rbga(0~255, 0~255, 0~255, 0~1 사이의 값)

예를 들면 아래와 같다.
rgba(0, 0, 0, opacity 0~1사이의 값): 검정색
rgba(255, 255, 255, opacity 0~1사이의 값 ): 흰색

아래는 포트폴리오 만들면서 쓴 코드인데
style을 쓰면서 부트스트랩과 같이 쓰게 됐다.

<p class="lead text-start rounded text-white text-center" style="background-color: rgba(0,0,0,0.4);">

참고: https://dev.to/jungjungie/how-to-change-background-opacity-without-affecting-text-597a

---

내가 만든 포트폴리오 중 일부인데 보면 텍스트 뒤의 네모난 건 부트스트랩 rounded text-white로 만들고
투명도 조절할 때 background-color: rgba(0,0,0,0.2); 쓰면 된다.

---