웹1.0/CSS, CSS2
CSS opacity 와 RGBA (배경색만 투명하게 만들기)
커드만
2016. 4. 22. 00:41
css로 투명도를 설정하는 방법과 그 밖의 유용한 Tip 정보를 알려드리기 위해
늦은 시간을 활용하여 끄적여(?) 보겠습니다.
일반적으로 저는 모를 사항 이었습니다만...
우리가 투명도를 주기 위해서는 CSS의 opacity라는 속성을 사용합니다.
접근성을 고려하여 아래와 같은 순으로 작성합니다.
하지만 위와 같이 작성하여 내가 원하는 곳만 투명하게 작업하기 위해선 불만족스러운 결과를 가져올 수 있습니다.
그 이유는 부모태그에 위와 같은 속성을 적용하면 그 안의 자식 요소까지 투명하게 만들어 버리기 때문 입니다. 말 여러번 해서 모합니까.
소스를 작성해 보겠습니다.
이 소스를 가지고 html로 만들어 브라우저로 확인해 보시면 안의 텍스트까지 반 투명해 지는 것을 확인할 수 있습니다.
근데 전 그런 디자인을 원한것이 아니라 배경만 투명하게 하고 싶다면??
다 방법이 있습니다.!!!
배경만 투명하게 하고 싶다면 방법은 2가지가 있습니다.
1. 반투명한 png 이미지 파일을 만들어 배경이미지로 적용한다.
2. RGBA속성값을 이용하여 배경만 투명하게 만든다.
RGBA속성값은 아래와 같이 적용하면 됩니다.
그럼 선택한 배경이미지만 투명하거나 반투명하게 처리하여 그 안에 포함되는 자식요소들은 원래의 색상으로 표현 될 것 입니다.
기타 새로운 사항이나 잘 못된 부분이 있으면 수정하여 올리도록 하겠습니다.