opacity

css 속성 opcity를 사용하여 투명도를 조절가능하다.

<style>
	h2 {
    	opacity: 0.5; //0~1의 값을 넣는다. 0: 완전투명, 1: 불투명
    }
  
</style>

문제점

opacity를 사용하여 투명도를 조절하니 하위 엘리먼트의 글자도 같이 투명해져서 가독성에 문제가 생긴다.

원하는 기능인 배경에만 투명도를 적용하기 위해서 rgba를 이용하여 투명도를 적용한다.

rgba

<style>
	h2 {
    	background-color: rgba(255, 255, 255, 0.3)
    }
  
</style>

이렇게 배경부분만 투명도를 조절이 가능하다.