답변 6개 / 댓글 4개
채택된 답변
+20 포인트
Copy
<p style="position:relative;"> <img src="http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg" /> <p style="position:absolute; top:20px; left:20px;">맛있는 돈까스</p></p>
이렇게 해 주시면 될 거 같아요.
<p style="position:absolute; background-color: rgba(0,0,0,0.6); color:white; font-size:100%; font-weight:bold; top:20%; left:5%;">제목</p>
<p style="position:absolute; background-color: rgba(0,0,0,0.6); color:white; font-size:100%; font-weight:bold; top:10%; left:5%;">날짜</p>
이렇게 해도 안되네요.ㅠㅠ
1번째가 기본넓이인 크기라면
기본넒이(가로폭)가 넓어 지면
3번째 그림처럼 %를 줘서 같이 늘어나지도
위치도 변해서요~ㅜ
텍스트를 얹을 이미지 너비는 알고 있지 않나요?
거기에 적당히 left, top 조절하면 될 거 같은데...
답변에 대한 댓글 1개
이미지가 100% 로 설정이 되있어서요~ 가로폭이 디바이스 종류 따라 변할때 글씨부분도 위치가 같이 변해줘야되는데 따로 따로 놀아서요 ~
<div style="position:relative;">
<img src="http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg" width="100%" border="0">
<p style="position:absolute; background-color: rgba(0,0,0,0.6); color:white; font-size:1.6em; font-weight:bold; top:20%; left:5%;">맛있는 돈까스</p>
<p style="position:absolute; background-color: rgba(0,0,0,0.6); color:white; font-size:1.0em; font-weight:bold; top:10%; left:5%;">날짠가?<p>
<div style="position:relative;">
<img src="http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg" width="100%" border="0">
<p style="position:absolute; background-color: rgba(0,0,0,0.6); color:white; font-size:1.6em; font-weight:bold; top:20%; left:5%;">맛있는 돈까스</p>
<p style="position:absolute; background-color: rgba(0,0,0,0.6); color:white; font-size:1.0em; font-weight:bold; top:10%; left:5%;">날짠가?<p>
답변을 작성하려면 로그인이 필요합니다.
<img src="http://sir.co.kr/data/thumb/qa/34306-2e4885eb683d1da7b44ae1b0fa618c50.jpg" />
<p style="position:absolute; top:20px; left:20px;">맛있는 돈까스</p>
</p>
이렇게 했을경우
가로폭이 가변일때 맛있는 돈까스 부분도 같이 가변가로폭으로 적용은 어떻게 해야할까요?ㅠ
포지션부분일것 같은데 감이 안옵니다~ 도와주세요~