CSS/개념정리
[속성] opacity 속성
xowoony
2022. 9. 10. 20:14
학습일 : 2022. 09. 07
opacity 속성
요소 자체의 투명도를 지정하기 위해 사용한다.
해당 요소가 가지고 있는 내용도 투명해 짐으로 사용에 유의한다.
용법
... {
opacity: [0.0~1.0|0%~100%];
}
값은 0부터 1까지의 실수 혹은 0%부터 100%까지의 백분율로 나타낸다.
값이 0(혹은 0%)이면 완전히 투명하고, 1(혹은 100%)이면 완전히 불투명하다.
단, 완전히 투명하다 하여도 요소는 있는 것이고 없어지는 것이 아님으로 사용에 유의한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>opacity 속성</title>
<style>
.box {
color: rgb(255,255,255);
font-size: 6rem;
}
.box:first-child {
width: 30rem;
height: 30rem;
background-color: rgb(50, 50, 50);
}
.box:nth-child(2) {
top: 2.5rem;
left: 2.5rem;
width: 40rem;
height: 40rem;
background-color: rgba(200, 100, 100);
opacity: 50%;❤
position: absolute;
}
</style>
</head>
<body>
<div class="box">첫번째 박스임</div>
<div class="box">두번째 박스임</div>❤
</body>
</html>===========실행결과===========
