您好我正在尝试创建响应式电子邮件模板。
我无法使背景图像响应。
以下是图片代码的示例：
a#learn-more { background-size: 100%; display: block; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/learn-more.png')no-repeat; height: 68px; width: 600px; margin: 0 auto; }
基本上我们有以下图像，我很难制作液体（响应） -logo（＃learn-more） -banner image（.banner-img） - 学习更多按钮（＃learn-more） -image1和image2
我的演示在这里：http://jsfiddle.net/nLxjU/3/
希望您可以编辑代码以查看我的问题，为什么我无法让他们做出响应。
我真的被困在这里。
答案 0 :(得分：1)
您可以使用具有绝对定位的不同div，并在其中包含具有百分位宽度和高度的图像，因此当屏幕大小更改时，div（以及其中的图像）也会调整大小。只需使用z-index将div放在所有内容之下，就可以了。
答案 1 :(得分：1)
电子邮件客户端，如Outlook（-Express），Mail（OSX）等，都使用不同的html引擎，并且有很多限制。特别是Outlook似乎使用有限的基于IE6的渲染引擎。 css类的背景图像和样式不起作用，忘记绝对或相对定位。
确保模板在这些电子邮件客户端中看起来也不错，除非您只针对移动电子邮件客户端（他们似乎支持所有这些）。
查看http://www.emailology.org/处的标准指南（html / css）。
答案 2 :(得分：1)
您可以使用以下内容改进，但正如@Willem所说，如果制作电子邮件模板，您确实需要更改方法。许多电子邮件客户端完全删除head并删除样式。有些支持一组有限的内联样式用于格式化，而没有用于布局。实际上，具有内联样式的旧式表格布局通常是最好的方法。
您可能会发现其中一些有用：http://www.campaignmonitor.com/guides/mobile/
至于你到目前为止所做的最好的事情：
.divider和.banner-img元素设置为600px宽。
将它们设置为100％。.lpanel和.rpanel图片的尺寸调整为父母的100％
宽度。