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>
원본 사진
이렇게 투명해 진 것을 볼 수 있다.
'Front-End > CSS' 카테고리의 다른 글
| [CSS3] 마우스를 올렸을 때 변화 넣기(마우스 오버/hover) (0) | 2021.11.10 |
|---|---|
| [CSS] 브라우저 업체별 접두어(vendor prefix) (0) | 2021.11.10 |
| [CSS] list-style-type 속성 (0) | 2021.11.10 |
| [CSS] float 속성 (0) | 2021.10.31 |
| [CSS] shadow 속성 (text-shadow, box-shadow) (0) | 2021.10.31 |
댓글