CSS에서 투명한 상자를 만들려면 opacity 속성을 사용하면 됩니다. opacity 값은 0(완전히 투명)부터 1(완전히 불투명) 사이의 숫자로 지정하며, 값이 작을수록 요소가 더 투명하게 보입니다.
아래 예제는 두 개의 div 박스를 만들어 하나는 opacity: 0.4로 반투명하게 처리하고, 다른 하나는 기본값인 opacity: 1(불투명 상태)으로 두어 차이를 비교할 수 있도록 구성한 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #808000;
padding: 20px;
}
div.myopacity {
opacity: 0.4;
filter: alpha(opacity=40);
}
</style>
</head>
<body>
<h1>제목</h1>
<p>아래 박스의 투명도를 확인해 보세요:</p>
<div class = "myopacity">
<p>opacity 0.4</p>
</div>
<div>
<p>opacity 1</p>
</div>
</body>
</html>코드 설명
위 코드의 핵심 부분을 살펴보면 다음과 같습니다.
1. 기본 스타일 설정
모든 div 요소에 올리브색(#808000) 배경과 20px 패딩을 적용하여 박스 형태를 만들어 줍니다.
2. 투명도 적용
.myopacity 클래스에는 opacity: 0.4가 설정되어 있어, 해당 박스는 배경색과 내부 텍스트까지 함께 40% 불투명도로 표시됩니다. 즉, 뒤에 있는 내용이 비쳐 보이게 됩니다.
3. 구형 브라우저 호환성
filter: alpha(opacity=...) 구문은 Internet Explorer 8 이하 버전을 위한 호환성 코드입니다. 참고로 이 필터의 값은 0~100 범위를 사용하므로, opacity: 0.4와 동일한 효과를 내려면 alpha(opacity=40)으로 지정해야 합니다. 최신 브라우저에서는 이 속성 없이 opacity만으로 충분합니다.
실행 결과
코드를 실행하면 첫 번째 박스는 반투명하게 표시되고, 두 번째 박스는 원래 색상 그대로 진하게 나타나는 것을 확인할 수 있습니다. 이처럼 opacity 속성을 활용하면 이미지 오버레이, 카드 디자인, 마우스 호버 효과 등 다양한 UI에서 자연스러운 투명 효과를 쉽게 구현할 수 있습니다.