如何在没有定位和z-index的图像中间写入文本？ [英] How to writte text in the middle of an image without positioning and z-index?

问题描述

我正在创建一个电子邮件模板，我需要在图像的中间写文本，但某些电子邮件系统不允许定位，我可以使用？

I am creating an email template and i need to writte text in the "middle" of an image, but some email system's doesn't allow positioning, what can i use?

我的HTML：

<img src="http://www.freelargeimages.com/wp-content/uploads/2014/12/Black_background-5.jpg" style="width:400px; height: 350px;" />
<p style="color:blue;">SOME TEXT FOR CONTENT..</p>

示例： https://jsfiddle.net/2zehs9f5/

推荐答案

如果你这样做是为了电子邮件，我建议将文本添加到图像本身，而不是使用背景图像定位。这样做的原因是背景图像不是很好地支持（特别是在Outlook 07/10/13），将必须回退到纯色，这可能毁了整个设计。

If you're doing this for email, I'd recommend adding the text to the image itself, rather than positioning it with a background-image. The reason for this is that background-image isn't very well supported (particularly in Outlook 07/10/13) and will have to fallback to a solid colour, which may ruin the entire design.

我也离开 p 标签，因为他们可以在不同的电子邮件客户端中呈现不同。

I'd also move away from p tags, as they can render differently in different email clients.

这是一个完成代码的JSFiddle： https://jsfiddle.net/czxrp2hf/1/

Here's a JSFiddle of the finished code: https://jsfiddle.net/czxrp2hf/1/

此外，此链接非常有助于了解哪些电子邮件客户端支持哪些CSS： https://www.campaignmonitor.com/css/

Also, this link is quite helpful for finding out what CSS is supported in which email clients: https://www.campaignmonitor.com/css/

这篇关于如何在没有定位和z-index的图像中间写入文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！