안녕하세요 ^-^
오늘은 배경이미지의 채도를
[ css ]로 조절해 볼게요.
이미지를 일일이 [ 포토샵 ]으로 하려면 너무
일도 많고 귀찮아요.
우리는 디자이너가 아니니 더 힘들잖아요~~
[ css ]로도 아주 간단하게 조절할 수 있답니다.
저번에 했던 [ after ]를 이용해서 간단하게 만들어 볼게요.
[ html ] 은 간단하게 이정도만 만들어 볼까요.
|
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
|
*{
margin:0;
padding:0;
box-sizing:border-box;
}
section{
height:500px;
position:relative;
padding:100px 0 50px;
overflow:hidden;
background:url(images/test.jpg) no-repeat center center;
z-index: 1;
}
section h3{
font-size:50px;
text-align:center;
color:#ffffff;
}
section p{
font-size:30px;
text-align:center;
color:#ffffff;
}
|
cs |
아주 간단하죠? 이제 실행을 해 볼게요.
저런 이미지가 너무 밝아요.
글자들이 하얀색이라 잘 보이지가 않네요.
overlay를 div로 만드는 경우도 많지만
간단하게 만들때는 [ after ]를 이용하면 편해요.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
section:after{
content:'';
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
right:0;
width:100%;
height:100%;
z-index: -1
}
|
cs |
이 구문만 추가해 주면~~
짠~~~ 이제 글자가 눈에
확 들어오죠??
여기에서 키 포인트는
background:rgba(0,0,0,0.5) 입니다.
rgba에서 a는 알파값 바로 투명도입니다.
a를 빼고 쓰시면 적용이 안 되는 브라우저가 있을 수 있으니
주의해 주세요.
(0,0,0,0.5)에서 앞에 숫자 3자리는 색상 값입니다.
rbg색상값을 넣어주시면 되고요.
뒤에 0.5는 투명도 값 [ opacity ]값 입니다.
0~1 사이의 값을 넣어주시면 됩니다.
여기서 주의해야 할 점!!
z-index:-1
필요 없어 보인다고 빼시면
이런 모양이 됩니다.
어떻게 된 거냐면요~~
배경색 뒤로 글자가 숨어버린 거예요.
z-index:-1
을 넣어주면 배경색이 뒤로 가게 되면서 글자가 앞으로 나오게 됩니다
아주~~ 간단하죠?
배경이미지 쓸 일이 참 많아서 이 구문은
많이 사용합니다.
여러분도 만들어 보세요.
쉬워서 더 재밌어져요~
'코딩 어린이의 노트' 카테고리의 다른 글
| 그라데이션 배경색 만들기 (0) | 2023.02.10 |
|---|---|
| 배경 이미지를 흐릿하게 만들어 보자 (0) | 2023.02.06 |
| CSS 배경이미지만 투명하게 만들 (1) | 2023.01.27 |
| [jquery] scroll 부드럽게 이동하기 (0) | 2023.01.09 |
| [jquery] ScrollTop 버튼 (2) | 2023.01.06 |