이미지 상단에 쓰기

Question

내 웹 사이트에 이미지가 있고 이미지를 인쇄하는 옵션을 추가하고 싶습니다. 그래서 그것을 할 수있는 방법을 찾았지만 왼쪽 상단에 "이미지 인쇄"라는 단어가 이미지 위에 놓 이길 원합니다.

문장을 어떻게 추가합니까?

미리 감사드립니다.

This is the image 왼쪽 하단의 텍스트는 "이미지 인쇄"를 의미합니다.

Answer 1

<div style="position:relative"> 
<img src="image.gif" alt="preview" /> 
<div style="position:absolute; left:0px; bottom:0px; cursor:pointer" onclick="...">Print Image</div> 
</div> 

Answer 2

이미지의 왼쪽 하단에 위치하는 텍스트 오버레이를 만들고 싶습니다. 이 목적을 달성하기 위해 div로 감싸 인 스팬 인라인 요소에 텍스트를 래핑 할 수 있습니다. 환경 설정에 맞게 상단 및 왼쪽 속성을 설정합니다. 샘플 코드는 다음과 같습니다 물론

<div id="content"> 
<div><img src="image.jpg" /></div> 
<div style="position: absolute; left: 10px; top: 100px;"> <!-- Change these parameters to reflect proper placement depending on the size of your image --> 
<span>Print Image</span> 
</div> 
</div> 

당신은 CSS 파일의 스타일을 구현할 수 있습니다. 희망이 유용합니다.