투명도 조절을 위한 6가지 예제를 제공하겠습니다. 각 예제는 요소의 투명도를 다르게 설정하며, 주석과 함께 상세히 설명하겠습니다. 또한, HTML과 CSS를 통합하여 제공하겠습니다.
예제 1: 100% 불투명
<!DOCTYPE html>
<html>
<head>
<style>
/* 100% 불투명 */
.opaque-100 {
opacity: 1; /* 투명도를 1로 설정 (불투명) */
}
</style>
</head>
<body>
<div class="opaque-100">이 요소는 100% 불투명합니다.</div>
</body>
</html>
예제 2: 75% 투명
<!DOCTYPE html>
<html>
<head>
<style>
/* 75% 투명 */
.opaque-75 {
opacity: 0.75; /* 투명도를 0.75로 설정 (75% 투명) */
}
</style>
</head>
<body>
<div class="opaque-75">이 요소는 75% 투명합니다.</div>
</body>
</html>
예제 3: 50% 투명
<!DOCTYPE html>
<html>
<head>
<style>
/* 50% 투명 */
.opaque-50 {
opacity: 0.5; /* 투명도를 0.5로 설정 (50% 투명) */
}
</style>
</head>
<body>
<div class="opaque-50">이 요소는 50% 투명합니다.</div>
</body>
</html>
예제 4: 25% 투명
<!DOCTYPE html>
<html>
<head>
<style>
/* 25% 투명 */
.opaque-25 {
opacity: 0.25; /* 투명도를 0.25로 설정 (25% 투명) */
}
</style>
</head>
<body>
<div class="opaque-25">이 요소는 25% 투명합니다.</div>
</body>
</html>
예제 5: 투명도 변화 효과
<!DOCTYPE html>
<html>
<head>
<style>
/* 투명도 변화 효과 */
.fade-effect {
opacity: 1;
transition: opacity 0.5s; /* 투명도 변경에 트랜지션 적용 */
}
.fade-effect:hover {
opacity: 0.5; /* 마우스 오버 시 투명도 변경 */
}
</style>
</head>
<body>
<div class="fade-effect">마우스 오버하여 투명도 변경</div>
</body>
</html>
예제 6: 배경 이미지 투명도
<!DOCTYPE html>
<html>
<head>
<style>
/* 배경 이미지 투명도 */
.image-opacity {
background-image: url('background-image.jpg'); /* 배경 이미지 설정 */
opacity: 0.7; /* 배경 이미지의 투명도 설정 */
}
</style>
</head>
<body>
<div class="image-opacity">이 요소의 배경 이미지는 투명합니다.</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 텍스트 강조 효과: 텍스트 강조 효과 추가. (0) | 2023.12.23 |
|---|---|
| 박스 그림자 효과: 박스에 그림자 효과 추가. (0) | 2023.12.23 |
| 링크 스타일링: 하이퍼링크 스타일 변경. (0) | 2023.12.23 |
| 버튼 스타일링: 버튼 디자인 커스터마이징. (0) | 2023.12.23 |
| 리스트 스타일 변경: 목록 요소의 스타일 변경. (0) | 2023.12.23 |