반응형
배경화면 위에 글씨가 있는 상황에서 배경화면은 투명하게 하고 글씨는 그 위로 보이도록 하겠습니다
html은 아래와 같습니다
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>배경화면 투명하게 하기</title>
</head>
<body>
<div class="container">
<h1 class="title">Hello</h1>
</div>
</body>
</html>
이제 css 설정을 해보겠습니다
-position을 이용해 배경화면과 글씨의 위치를 조정해줍니다
-가상선택자 ::after을 이용해 배경화면의 가상요소를 생성하여 여기에 배경 이미지와 투명도를 지정해줍니다
-z-index 설정으로 가상요소를 원본의 뒤로 밀어줍니다
style.css
.container {
width: 100%;
height: 100%;
text-align: center;
position: relative;
z-index: 1;
}
.container::after {
width: 100%;
height: 100%;
content: "";
background: url("./images/background.jpg");
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
Resources
반응형
'Learning Log > HTML&CSS' 카테고리의 다른 글
| [html] input과 button tag의 차이점 (0) | 2023.01.06 |
|---|---|
| [html/css] 목록을 만드는 dl, dt, dd tag (0) | 2023.01.06 |
| [css] Layout - inline, inline-block, block이란 (0) | 2022.12.16 |
| [css] Layout - position 속성이란 (0) | 2022.12.16 |
| [html/css] Semantic Web과 Semantic Tags의 차이 (0) | 2022.12.08 |