투명한 배경색을 넣고 싶을 때

배경이미지를 깔고 텍스트를 넣으니 글씨가 잘 보이지 않습니다.

그래서 배경색을 넣었더니 이번엔 배경이미지가 보이지 않아요.

그래서 배경색을 투명하게 넣고싶습니다.

이럴 때 쓰는 속성이 opacity입니다.

opacity를 넣으면 배경색 뒤로 배경이미지가 보여 좋긴 한데, 글자도 흐릿해지네요.

글자를 선명하게 넣고 싶은데 방법이 없는걸까요?

이럴 때 쓸 수 있는 속성이 rgba입니다.

rgba는 배경색을 투명하게 하면서 글자는 선명하게 유지할 수 있어요.

rgba와 opacity의 차이가 느껴지나요?

 

둘의 차이를 확실히 비교해 볼 수 있도록 opacity와 rgba를 반반씩 붙여봤어요.

왼쪽이 opacity, 오른쪽이 rgba입니다.

rgba의 글자가 확실히 선명하지요?