Question

您好我正在尝试创建响应式电子邮件模板。

我无法使背景图像响应。

以下是图片代码的示例：

a#logo {
    display: block;
    background-size: 100% 100%;
    width: 171px;
    height: 119px;
    background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/logo3.png')no-repeat;
    margin: 14px auto;
}

此外，我想问一些想法，使其看起来完美的响应网站。

DEMO：http://jsfiddle.net/nLxjU/2/

由于

Answer 1

无论您在何处使用背景图片，请确保元素的width为100%而不是600px，并使用background-position: center center正确定位图像。我能够通过这种方式修复大部分图像。

http://jsfiddle.net/myajouri/nLxjU/5/

Answer 2

看看这个：http://www.campaignmonitor.com/blog/post/3107/css3-support-in-email-clients/

如果不是不可能的话，你会发现你想要实现的目标很难。后台大小是css3，电子邮件客户端不广泛支持。你可能需要采用不同的方式。

Answer 3

很多电子邮件客户端不支持css3，因此您无法使用背景大小，为什么不添加图像呢？如果你需要一个元素，它就是绝对的。

Answer 4

您需要删除当前为其设置的背景/背景图像属性的所有元素，而是用<img>元素替换相应的元素，其宽度需要设置为{{1}并且放置在具有定义宽度的包含元素中，图像可以用作参考 - 作为响应模板我猜这个容器应该具有100%宽度。

那就是说，你仍然没有澄清你对'响应性'的期望是什么，上面的内容适用于简单的宽度调整大小，如果你想在调整大小时堆叠或溢出，这是不同的，需要更多的工作，这可能是收件人电子邮件客户端可能不支持。我再说一遍，看看this article。与HTML电子邮件一样，我的建议是保持简单并坚持有效的方法。例如。一个固定的模板，包括尽可能小的图像（kb明智）和尽可能简单的DOM - 这样可以防止设计看起来很糟糕，但对于每个接收它的人都很糟糕。

NB。鉴于小提琴中提供的代码数量，您可能想要分解您的问题，因为我不太可能会为您重构整个模板。

CSS响应图像元素

4 个答案: