안녕하세요. ^-^
오랜만에 코딩을 일기를 쓰네요.
오늘은 [ CSS ]를 해볼까 합니다.
사실 제가 쓰는 언어가 [ HTML ]과 [ CSS ]
거든요.
하지만 전문적으로 배운 것은 아니니
틀린 부분은 말씀해주시면 감사합니다.!!
오늘은 백그라운드 이미지에 투명도를 줘 볼 거예요.
백그라운드에 투명도를 주게 되면
그 위에 글씨마저도 투명도가 함께 들어가게 되는데
제가 이번에 보여드릴 것은 백그라운드 이미지에만 투명도는 주는 방법입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h3>어서오세요</h3>
<p>백그라운드 투명도 조절해 봅시다!!</p>
</section>
</body>
</html>
|
cs |
[ HTML ] 코드는 간단하게 만들어 봤어요.
이제 [ CSS ]를 만들어 볼까요?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
*{
margin:0;
padding:0;
box-sizing:border-box;
}
section{
height:500px;
position:relative;
padding:100px 0 50px;
overflow:hidden;
background:#0063AE;
z-index: 1
}
section:after{
content:'';
background:url(images/transparent.svg) no-repeat left top;
background-size:contain;
position:absolute;
top:0;
left:0;
right:0;
width:100%;
height:100%;
opacity:1;
z-index: -1
}
section h3{
font-size:50px;
text-align:center;
color:#ffffff;
}
section p{
font-size:30px;
text-align:center;
color:#ffffff;
}
|
cs |
제가 만든 [ CSS ]입니다.
after를 사용하여 백그라운드를 넣어주는 방법입니다.
따로 tag를 더 넣어줄 필요 없이 after를 넣어주면
간단하게 해결할 수 있어요.
투명도를 주지 않았을 경우입니다. 실행을 해보면 아래와 같아져요.
글자가 잘 안 보이네요.
이럴 경우 위의 [ CSS ]를 이렇게 고쳐주시면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
*{
margin:0;
padding:0;
box-sizing:border-box;
}
section{
height:500px;
position:relative;
padding:100px 0 50px;
overflow:hidden;
background:#0063AE;
z-index: 1
}
section:after{
content:'';
background:url(images/transparent.svg) no-repeat left top;
background-size:contain;
position:absolute;
top:0;
left:0;
right:0;
width:100%;
height:100%;
opacity:0.11;
z-index: -1
}
section h3{
font-size:50px;
text-align:center;
color:#ffffff;
}
section p{
font-size:30px;
text-align:center;
color:#ffffff;
}
|
cs |
opacity를 0.11로 고쳐 주었답니다.
opacity는 0과 1 사이의 숫자를 넣어주면 됩니다.
소수점이겠죠?
이제 실행을 해볼까요?
오오 투명도가 들어갔어요.
background의 width를 조절해 주시면
크기도 조절이 가능하답니다.
아주 간단하죠?
section 태그에 넣었던 background를
section:after에 넣어주니 투명도 조절도 쉽고
크기나 위치 조절도 쉬워졌어요.
이 [ CSS ]는 의외로 쓸 곳이 참 많아요.
배경을 여러 가지 이미지를 합쳐서 만드는 경우가 많거든요.
여러분도 나중에 한번 써먹어 보세요.
간단하게 만들 수 있답니다.
'코딩 어린이의 노트' 카테고리의 다른 글
| 배경 이미지를 흐릿하게 만들어 보자 (0) | 2023.02.06 |
|---|---|
| 배경이미지의 채도를 조절해요 (0) | 2023.02.01 |
| [jquery] scroll 부드럽게 이동하기 (0) | 2023.01.09 |
| [jquery] ScrollTop 버튼 (2) | 2023.01.06 |
| 코딩을 배우는 자세 (2) | 2023.01.03 |