HTML - 포토샵 없이 이미지 위에 글쓰기
[1] 기본 - 이미지 위에 글씨 쓰기!
| <table width="710px" cellpadding="0px" cellspacing="0px" border="0px"> <tr> <td style="padding:10px 10px 10px 0px; background:url(http://postfiles1.naver.net/20140723_160/vonosoo1_1406103571188iUx7z_JPEG/1406103513343.jpeg?type=w1); background-repeat:no-repeat;" width="710px" height="510px" valign="top" align="right"><span style="color:#ffffff; font-weight:700; font-size:21px; font-family:맑은 고딕; letter-spacing:0px; line-height:1.6;">경복궁 야간개장!! <br />입장하려는 사람들.... 많다!<br /> 언제 들어가려나? </span></td> </tr></table> ※ 소스 참고 내용 background:url(배경이미지.jpg); ⇒ 배경으로 사용할 이미지 주소 넣어주세요. background-repeat:no-repeat; ⇒ 배경이미지 고정! 이미지 반복 안하기 소스인거 아시죠? width="710px" height="510px" ⇒ background 사용 시 이미지 사이즈 입력! valign="top" align="right" ⇒ 글자 위치 조정 padding:10px 10px 10px 0px; ⇒ 글자 위치 여백조정 |
[2] background-color: rgba 사용
| <table width="900px" cellpadding="0px" cellspacing="0px" border="0px"><tr><td style="padding:10px 10px 10px 10px; background:url(http://postfiles7.naver.net/20140715_262/vonosoo1_1405410677191e1wim_JPEG/20140715_160637.jpg?type=w1);background-repeat:no-repeat;" width="900px" height="506px" valign="bottom" align="right"><span style="color:#fd6a1c; font-weight:700; font-size:34px; font-family:맑은 고딕; letter-spacing:-3px; line-height:1.6; background-color: rgba(255, 255, 255, 0.6); padding:0px 15px 5px 10px">에브리씽의 <br /> 명함 이벤트 당첨!! 아웃백~ 간식타임!!</font></span></td> </tr> </table> ※ 소스 참고 내용 background:url(배경이미지.jpg); ⇒ 배경으로 사용할 이미지 주소 넣어주세요. background-repeat:no-repeat; ⇒ 배경이미지 고정! 이미지 반복 안하기 소스인거 아시죠? width="900px" height="506px" ⇒ background 사용 시 이미지 사이즈 입력! valign="bottom" align="right" ⇒ 글자 위치 조정 padding:0px 15px 5px 10px" ⇒ 글자 위치 여백조정 background-color: rgba(255, 255, 255, 0.6); ⇒ 255, 255, 255 : 컬러값 / 0.6 : 투명도(낮아질수록 투명도 높아짐) |
[3] opacity 사용
| <table width="475px" cellpadding="0px" cellspacing="0px" border="0px"><tr><td style="padding:0px 0px 40px 0px; background:url(http://postfiles2.naver.net/20140722_257/vonosoo1_1405994973531U4CK9_JPEG/595425.jpg?type=w1);background-repeat:no-repeat;" width="475px" height="542px" valign="middle" align="center"><span style="color:#ffffff; font-weight:700; font-size:34px; font-family:맑은 고딕; letter-spacing:-3px; line-height:1.6; background:#df5002; opacity:0.6; position: absolute; width:475px; padding-bottom:5px">맛있는 커피!! 아메리카노~ </span></td> </tr> </table> ※ 소스 참고 내용 background:url(배경이미지.jpg); ⇒ 배경으로 사용할 이미지 주소 넣어주세요. background-repeat:no-repeat; ⇒ 배경이미지 고정! 이미지 반복 안하기 소스인거 아시죠? width="475px" height="542px" ⇒ background 사용 시 이미지 사이즈 입력! valign="middle" align="center" ⇒ 글자 위치 조정 absolute; width:475px; padding-bottom:5px ⇒ 글자 위치 여백조정 background:#df5002; opacity:0.6; ⇒#df5002 : 컬러값 / opacity:0.6 : 투명도(낮아질수록 투명도 높아짐) |
https://blog.naver.com/vonosoo1/220092180498
https://mountherb.tistory.com/1834
1850
그 어느 날
누구일까요?
;){kind=link}
;background-repeat:no-repeat;){kind=link}
;background-repeat:no-repeat;){kind=link}