<CSS>배경색깔 입히기 (opacity),(rgba)

우리가 원하는 블록에 텍스트 뒤에 배경색깔을 입힐 떄 종종 아래와 같은 상황이 발생하는 분들이 있을것이다. 기존의 색깔에서 <opacity>로 투명도를 줫다고 생각했는데 입히고 나니까 뭔가 텍스트 위에 겹쳐서 뿌옇게 보이게 되는 경우가 있을 것이다.

See the Pen GRoqaJP by Sang Hoon Jeong (@DevilFront) on CodePen.

 

내가 생각한대로 순차적으로 했지만 뭔가 텍스트가 뿌옇게 덮여진 느낌이다. 그럴떈 아래처럼 <background-color>에서  rgba 속성을 이용하면 된다.

 

See the Pen YzwWbyj by Sang Hoon Jeong (@DevilFront) on CodePen.

 

어찌보면 당연하게 뿌연 것이다. opacity 속성이 블록 전체에 먹은것이라 뿌옇게 보이는 것이고 배경색깔에만 집중해서 투명도를 주고 싶은 거면 직접 background-color속성에 먹여줘야 하는 것이다.