답변 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; }
댓글을 작성하려면 로그인이 필요합니다.
* 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; }
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인