목차
- opacity 예제 - 불투명도 30%로 설정
- opacity 정의
- opacity 구문
opacity 예제 - 불투명도 30%로 설정
<style>
#box {
position: absolute;
width: 300px;
height: 150px;
background-color: blue;
border: 1px solid black;
}
#hz {
position: relative;
top: 130px;
left: 30px;
width: 300px;
height: 150px;
background-color: red;
border: 1px solid black;
}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz"><h1>홈짱닷컴 Homzzang.com</h1></div>
<div id="box"></div>
<script>
function homzzang() {
document.getElementById("box").style.opacity = "0.3";
}
</script>
결과보기
opacity 정의
요소의 불투명도 설정/반환.
1.
- 기본값: 1 (※ 완전 불투명)
- 반환값: 요소의 불투명도를 나타내는 문자열.
- CSS속성: opacity
- CSS버전: CSS3
2.
모든 브라우저 지원.
opacity 구문
반환
object.style.opacity
설정
object.style.opacity = "number|initial|inherit"
[속성값]
number
0.0 ~ 1.0 사이의 숫자. (숫자 클수록 더 불투명) (기본값: 1.0)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.