더보기
- opacity: 투명도를 조절하는 속성, 값은 0~1
- 1 : 완전 불투명, 밑에있는 내용이 안보임, 기본값
- 0 : 완전 투명, 위에있는 배경이 아예 안보임
- rgba : (red, green, blue, alpha)
- red : 빨강색 색상정보, 0~255
- green : 초록색 색상정보, 0~255
- blue : 파랑색 색상정보, 0~255
- alpha : 투명도
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>투명도 예제</title>
<style>
.box1{width: 300px; height: 300px; background: white;
position: absolute; top: 50; left: 50px;}
.box2{width: 300px; height: 300px; background: red;
position: absolute; top: 50; left: 50px; opacity: 0.3;}
.box3{width: 300px; height: 300px; background-color: rgba(0, 0, 255, 0.3);
position: absolute; top: 50; left: 50px;}
</style>
</head>
<body>
<div class="box1">
안녕하세요.
</div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_네이버뉴스기사(메인파트)따라하기(세로/가로) (0) | 2021.06.15 |
|---|---|
| CSS_hover (0) | 2021.06.14 |
| CSS_반응형 페이지 (0) | 2021.06.13 |
| CSS_display, visibility, flex (0) | 2021.06.13 |
| CSS_크기조절 resize (0) | 2021.06.13 |