이미지 위에 텍스트를 삽입하는 방법 (이메일)?

Question

불가능하므로 : ::after for inline HTML email?

어떻게 아래 이미지 위에 텍스트를 넣을 수 있습니까?

는 position과 부정 마진 이메일로 지원하지 않는 것 있음을 유의하십시오.

<img src="http://www.livetochallenge.com/assets/blue-banner.png"> 
<div style="display: inline-block;"> # Put this text on banner 
    Put<br> 
    Over<br> 
    Image 
</div> 

Answer 1

전자 메일의 텍스트 오버 이미지의 경우 가장 안전한 방법은 텍스트를 이미지에 렌더링하고 ALT 태그를 제공하는 것입니다. 이렇게하면 장치 또는 전자 메일 클라이언트에 관계없이 모든 텍스트가 항상 이미지에 있음을 100 % 보장 할 수 있습니다. 밖에있는 많은 클라이언트는 배경 이미지를 지원하지 않으므로 제대로 렌더링 할 수는 있지만 항상 2009 년의 Outlook을 사용하는 사용자가 있습니다.

일부 동료가이 사이트를 사용하여 꽤 좋은 결과를 얻었습니다 : https://backgrounds.cm/ - 다시 한번 모든 클라이언트/장치에서 작동하지 않습니다.

다른 해결책은 배경을 "퍼지"하는 것입니다. 예를 들어 텍스트가 단색 그래픽 위에 있으면 텍스트를 개별적으로 잘라내어 배경색을 사용할 수 있습니다. 그런 식으로 텍스트가 살아 있습니다. 예를 들어, 제공 한 이미지가 배너로 보입니다. 중간 부분은 # 2E3E65의 배경색을 가진 단순히 TD 일 뿐이며 주변 요소에는 사용자가 제공 한 배너 이미지가있을 수 있습니다.

위와 같이 말하지만, 내 강력한 제안은 이미지 경로를 이동하는 것입니다. 그런 다음 반응 형 테스트와 편집에 집중할 수 있습니다. 희망을 도왔습니다.

편집 이 봐 유무 : https://www.campaignmonitor.com/css/ 코드 - 길을가는 것은 절대 필수 인 경우, 요소/태그/속성을 모든 주요 전자 메일 클라이언트에서 작동 무엇을 설명하는 매우 편리한 가이드입니다. 또한 라이브 텍스트 :-)

편집 2

난 그냥 인라인 여기에 모든 것을 한 고집 경우 클라이언트에 전달하는 유익한 정보가 될 수 있습니다. 스타일 태그를 던지기 위해 마크 업을 크게 정리 한 다음 html 대신 스타일을 추가하면됩니다. 아래와 같이

<table style="width:300px; border-collapse: collapse; margin: 0; padding: 0; border: none;"> 
<tr style="height: 54px;"> 
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://www.livetochallenge.com/assets/blue-banner.png" style="margin: 0; padding: 0;"/></td> 
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none;"><div style="background-color: #354871; height: 37px; color: white; text-align: center; padding-top: 15px;"># Put this text on banner</div></td> 
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://i.imgur.com/OgwtHvr.png" style="margin: 0; padding: 0;"/></td> 
</tr> 
</table> 

이것은 "퍼지"효과를 생성합니다 : 합니다.

참고 - 이미지를 가로로 뒤집기 위해 포토샵을 사용했습니다. 또한, 약간의 색상 변경을 무시하십시오. 뒤집은 이미지를 어떻게 내 보낸 지 문제 일뿐입니다.