안녕하세여~! 올만에 질문좀여^^
본문
안녕하세여 질문좀 할게여
게시판은 배치스킨 쓰고 있는데여
게시글 본문에 이미지를 넣고 그 이미지 안에 글 쓰고싶은데요
그누보드 이미지 오버레이 텍스트 라고 하나요?
이 이미지를 넣고싶은데 저 이미지 안에 게시글 본문을 쓰고싶어서요
답변 3
이미지를 포함해서 컨테이너를 만들어주고 백그라운드 이미지 배치 해당요소를 이미지 지정하시고
위에 겹처서 보이게 postition: absolute; transform: translate 기타 추가속성등을 사용해서 센터정열 하시면됩니다.
아래 참고하시기 바랍니다.
.ov_container {
position: relative;
width: 500px;
height: 300px;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}
.ov_text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
<div class="ov_container">
<img src="your_image.jpg" alt="오버레이할 이미지">
<div class="ov_text">
여기에 오버레이할 텍스트를 입력하세요
</div>
</div>
* style.css 에
.ov_container {
position: relative; /* 자식 요소(ov_text)의 기준점이 됩니다 */
display: inline-block; /* 이미지 크기에 맞춰 컨테이너 크기 조절 (또는 width, height 지정) */
overflow: hidden; /* 이미지나 텍스트가 넘치면 숨김 */
}
.ov_container img {
display: block; /* 이미지 하단 여백 제거 (선택 사항) */
width: 100%; /* 컨테이너에 맞춰 이미지 너비 조절 */
height: auto;
}
.ov_text {
position: absolute; /* 부모(ov_container)를 기준으로 절대 위치 */
top: 50%; /* 상단에서 50% 위치 */
left: 50%; /* 왼쪽에서 50% 위치 */
transform: translate(-50%, -50%); /* 자신의 크기만큼 다시 -50% 이동하여 정확히 중앙 정렬 */
color: white; /* 텍스트 색상 (이미지 대비 잘 보이게) */
font-size: 24px; /* 폰트 크기 */
font-weight: bold;
text-align: center;
width: 80%; /* 텍스트 너비 (너무 길어서 넘치지 않도록) */
padding: 10px;
background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 (텍스트 가독성 높임) */
border-radius: 5px;
}
게시판 본문 내용에 텍스트 어레이 넣어주세요
textarea 넣고 css로 border:none 처리 해주세요
