Front-End/CSS
[CSS] opacity 속성(요소를 투명하게 만드는 속성)
찐코딩
2021. 11. 10. 17:44
opacity 속성
/* 문법 */
opacity: number /*0.0부터 1.0까지의 수를 넣음*/
숫자가 작을수록 투명해짐
pacity의 기본(default) 값은 1이다.
1이 원색 그 자체로써 투명도를 부여하지 않은 것을 뜻한다.
해당 속성은 0부터 1까지의 범위를 가지며, 자유롭게 값을 부여할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.photo {
opacity: 0.5; /* 투명도 속성 - 반 투명도 */
}
</style>
</head>
<body>
<img class="photo" src="images/img.jpg" alt="튤립 이미지">
</body>
</html>
원본 사진
이렇게 투명해 진 것을 볼 수 있다.