[#. CSS] 이미지 위에 텍스트, 글자 올리기 text on image
이미지 위에 텍스트를 올리고 싶은데
position: absolute는 쓰기 싫다
간단하게 이미지 위에 텍스트를 올려보자
① HTML
<div class="text-on-img">
<div class="background-wrap">
<div class="content">
<span>Title</span>
<span>Content</span>
</div>
</div>
</div>
② CSS
.background-wrap {
background-image: url('https://image.freepik.com/free-photo/wall-wallpaper-concrete-colored-painted-textured-concept_53876-31799.jpg');
background-size: 272px 196px;
width: 272px;
height: 196px;
display: flex;
justify-content: center;
align-items: center;
}
.content {
display: flex;
flex-direction: column;
}
.content span {
color: white;
}
.content span:nth-child(1) {
font-size: 25px;
font-weight: bold;
}
.content span:nth-child(2) {
font-size: 20px;
}
이렇게 잘 올라간다
