rgba(); 값은 배경색 만 투명도를 설정할 수 있는 좋은 속성입니다.

하지만 지원하지 않는 브라우저가 있죠.

rgba browser support

출처 : https://css-tricks.com/rgba-browser-support/

이럴 때 사용하면 도움되는 방법입니다.

다음 코드를 봐주세요.

<!doctype html>
<html>
<head>
	<title>background-color</title>
<meta charset="utf-8">
</head>

<body>
	<div class="bg">배경</div>
</body>
</html>

bg라는 class를 가진 div에 반투명 배경을 추가한다 치면,

.bg {
 width: 150px;
 height: 150px;
 background-color: rgba(0,0,0,0.5); /* 검은색 배경, 투명도 0.5 */
}

보통 이렇게 생각하고 CSS를 작성합니다.

.bg {
 width: 150px;
 height: 150px;
 background-color: #000; /* rgba 를 지원하지 않는 브라우저용 배경색 */
 background-color: rgba(0,0,0,0.5); /* 검은색 배경, 투명도 0.5 */
}

구버전 브라우저를 위해 이러기도 하죠.

어떻게 나오는지 한번 볼까요?

green

rgba 를 지원하는 최신 브라우저

red

rgba를 지원하지 않는 구버전

이렇게 나옵니다.

구버전을 버리면 참 좋겠지만, 아직 많은 사람이 사용한다는거…

올해부터 IE 구버전 지원을 종료한다니 어떻게든 되겠죠 뭐.

(바이러스를 환영하고, 내 개인정보는 모두의 것이다 싶음 구버전 그대로 사용하는걸 추천)

꼼수를 써봅시다.

<!doctype html>
<html>
<head>
	<title>background-color</title>
<meta charset="utf-8">
</head>

<body>
	<div class="bg">
	 배경
	 <span class="inner-bg"></span>
	</div>
</body>
</html>

<span class="inner-bg"></span> 라는 놈을 추가하고,

.bg {
 position: relative;
 width: 150px;
 height: 150px;
}
.bg .inner-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #000; /* 배경색 */
 opacity: 0.5; /* 투명도 조절 */
 z-index: -1; /* .bg 보다 뒤로 보내기 */
}

이렇게 CSS를 입혀둔 후 테스트를 해볼까요?

green

최신버전

red

구버전

아 ㅡㅡ…

.bg {
 position: relative;
 width: 150px;
 height: 150px;
}
.bg .inner-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #000; /* 배경색 */
 opacity: 0.5; /* 투명도 조절 */
 z-index: -1; /* .bg 보다 뒤로 보내기 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE7 */
}

이렇게 해줍시다.

green

IE8

어때요, 정말 짜증쉽죠?

방법은 많겠지만, 저는 이 방법을 종종 사용합니다.

선택은 여러분의 몫.

Comments +0

Leave a Comment

Your email address will not be published.
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>