HTML电子邮件表与阴影背景

Question

我正在建立一个发送的HTML电子邮件，我意识到它更好地使用表而不是div，但其中一个部分我想像我们的公司网站（服务部分）的阴影背景： http://lasersurveying.com/

最好的办法是什么？

Answer 1

将此应用于您的表格或其中包含的电子邮件内容：

style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAeAAgMAAABSzKJVAAAADFBMVEVMaXGZmZmZmZmZmZnjntakAAAABHRSTlMACnxgcDy07gAAD71JREFUeF7t2zEKwkAURdEBe/dj5xJdpAsRDBb2IeTnHhs5/cD9BN56ru/vvf3dL0Zc2+/22v4fVyMGXjJe+Oli4CWjdy7BKMGDKcEowSjBKMEowSjBKMESjBKMEowSjBKMEowSLMEowSjBKMEowSjBKMG4rv2S0brQuhDd0uiWRrc0+pyFEowSLMEowSjBKMEowSjBO1CCUYJRglGCUYJRglGCJRglGCUYJRglGCUYJViC0boQrQvRuhDd0uiWRrc0eucSjBKMEowSjBKMEowSLMEtSjBKMEowSjBKMEowSrAEowSjBKMEowSjBKMESzBaF6J1IVoXolsa3dLolkbvXIJRglGCUYJRglGCUYIluEYJRglGCUYJRglGCUYJlmCUYJRglGCUYJRglGAJRutCtC5E60J0S6NbGt3S6J1LMEowSjBKMEowSjBKsATXKMEowSjBKMEowSjBKMESjBKMEowSjBKMEowSLMFoXYjWhWhdiG5pdEujWxq9cwlGCUYJRglGCUYJRgmW4BolGCUYJRglGCUYJRglWIJRglGCUYJRglGCUYIlGK0L0boQrQvRLY1uaXRLo3cuwSjBKMEowSjBKMEowRJcowSjBKMEowSjBKMEowRLMEowSjBKMEowSjBKsASjdSFaF6J1Ibql0S2Nbmn0ziUYJRglGCUYJRglGCVYgmuUYJRglGCUYJRglGCUYAlGCUYJRglGCUYJRgmWYLQuROtCtC5EtzS6pdEtjd65BKMEowSjBKMEowSjBEtwjRKMEowSjBKMEowSjBIswSjBKMEowSjBKMEowRKM1oVoXYjWheiWRrc0uqXRO5dglGCUYJRglGCUYJRgCa5RglGCUYJRglGCUYJRgiUYJRglGCUYJRglGCVYgtG6EK0L0boQ3dLolka3NHrnEowSjBKMEowSjBKMEizBNUowSjBKMEowSjBKMEqwBKMEowSjBKMEowSjBEswWheidSFaF6JbGt3S6JZG71yCUYJRglGCUYJRglGCJbhGCUYJRglGCUYJRglGCZZglGCUYJRglGCUYJRgCUbrQrQuROtCdEujWxrd0uidSzBKMEowSjBKMEowSrAE1yjBKMEowSjBKMEowSjBEowSjBKMEowSjBKMEizBaF2I1oVoXYhuaXRLo1savXMJRglGCUYJRglGCUYJluAaJRglGCUYJRglGCUYJViCUYJRglGCUYJRglGCJRitC9G6EK0L0S2Nbml0S6N3LsEowSjBKMEowSjBKMESXKMEowSjBKMEowSjBKMESzBKMEowSjBKMEowSrAEo3UhWheidSG6pdEtjW5p9M4lGCUYJRglGCUYJRglWIJrlGCUYJRglGCUYJRglGAJRglGCUYJRglGCUYJlmC0LkTrQrQuRLc0uqXRLY3euQSjBKMEowSjBKMEowRLcI0SjBKMEowSjBKMEowSLMEowSjBKMEowSjBKMESjNaFaF2I1oXolka3NLql0TuXYJRglGCUYJRglGCUYAkOUoJRglGCUYJRglGCUYIlGCUYJRglGCUYJRglWILRuhCtC9G6EN3S6JZGtzR65xKMEowSjBKMEowSjBIswSjBKMEowSjBKMEowRKMEowSjBKMEowSjBKM3rkEZ2hdiNaFaF2Ibml0S6NbGn/0ziV4KnHm40QJxp0TjBKMEowSjBKMEizBKMEowSjBKMEowSjBEowSjBKMEowSjBKMEoxz14VoXYjLutAtjW5pdEujz1kowSjBKMESjBKMEowSjBJ8DCUYJRglGCUYJRglGCVYglGCUYJRglGCUYJRgiUYrQvRuhCtC9EtjW5pdEujdy7BKMEowSjBKMEowSjBElyjBKMEowSjBKMEowSjBEswSjBKMEowSjBKMEqwBKN1IVoXonUhuqXRLY1uafTOJRglGCUYJRglGCUYJViCa5RglGCUYJRglGCUYJRgCUYJRglGCUYJRglGCZZgtC5E60K0LkS3NLql0S2N3rkEowSjBKMEowSjBKMES3CNEowSjBKMEowSjBKMEizBKMEowSjBKMEowSjBEozWhWhdiNaF6JZGtzS6pdE7l2CUYJRglGCUYJRglGAJrlGCUYJRglGCUYJRglGCJRglGCUYJRglGCUYJViC0boQrQvRuhDd0uiWRrc0eucSjBKMEowSjBKMEowSLME1SjBKMEowSjBKMEowSrAEowSjBKMEowSjBKMESzBaF6J1IVoXolsa3dLolkbvXIJRglGCUYJRglGCUYIluEYJRglGCUYJRglGCUYJlmCUYJRglGCUYJRglGAJRutCtC5E60J0S6NbGt3S6J1LMEowSjBKMEowSjBKsATXKMEowSjBKMEowSjBKMESjBKMEowSjBKMEowSLMFoXYjWhWhdiG5pdEujWxq9cwlGCUYJRglGCUYJRgmW4BolGCUYJRglGCUYJRglWIJRglGCUYJRglGCUYIlGK0L0boQrQvRLY1uaXRLo3cuwSjBKMEowSjBKMEowRJcowSjBKMEowSjBKMEowRLMEowSjBKMEowSjBKsASjdSFaF6J1Ibql0S2Nbmn0ziUYJRglGCUYJRglGCVYgmuUYJRglGCUYJRglGCUYAlGCUYJRglGCUYJRgmWYLQuROtCtC5EtzS6pdEtjd65BKMEowSjBKMEowSjBEtwjRKMEowSjBKMEowSjBIswSjBKMEowSjBKMEowRKM1oVoXYjWheiWRrc0uqXRO5dglGCUYJRglGCUYJRgCa5RglGCUYJRglGCUYJRgiUYJRglGCUYJRglGCVYgtG6EK0L0boQ3dLolka3NHrnEowSjBKMEowSjBKMEizBNUowSjBKMEowSjBKMEqwBKMEowSjBKMEowSjBEswWheidSFaF6JbGt3S6JZG71yCUYJRglGCUYJRglGCJbhGCUYJRglGCUYJRglGCZZglGCUYJRglGCUYJRgCUbrQrQuROtCdEujWxrd0uidSzBKMEowSjBKMEowSrAE1yjBKMEowSjBKMEowSjBEowSjBKMEowSjBKMEizBaF2I1oVoXYhuaXRLo1savXMJRglGCUYJRglGCUYJluAaJRglGCUYJRglGCUYJViCUYJRglGCUYJRglGCJRitC9G6EK0L0S2Nbml0S+OObwYlGCUYJRglGL+/jd65BE8lTnmNKMGYSTBKsASjBKMEowSjBKMEowRLMEowSjBKMEowSjBaF6J1oXUhuqXRLY1uafQ5CyUYJViCUYJRglGCUYJRgnegBKMEowSjBKMEowSjBEswSjBKMEowSjBKMEqwBKN1IVoXonUhuqXRLY1uafTOJRglGCUYJRglGCUYJViCa5RglGCUYJRglGCUYJRgCUYJRglGCUYJRglGCZZgtC5E60K0LkS3NLql0S2N3rkEowSjBKMEowSjBKMES3CNEowSjBKMEowSjBKMEizBKMEowSjBKMEowSjBEozWhWhdiNaF6JZGtzS6pdE7l2CUYJRglGCUYJRglGAJrlGCUYJRglGCUYJRglGCJRglGCUYJRglGCUYJViC0boQrQvRuhDd0uiWRrc0eucSjBKMEowSjBKMEowSLME1SjBKMEowSjBKMEowSrAEowSjBKMEowSjBKMESzBaF6J1IVoXolsa3dLolkbvXIJRglGCUYJRglGCUYIluEYJRglGCUYJRglGCUYJlmCUYJRglGCUYJRglGAJRutCtC5E60J0S6NbGt3S6J1LMEowSjBKMEowSjBKsATXKMEowSjBKMEowSjBKMESjBKMEowSjBKMEowSLMFoXYjWhWhdiG5pdEujWxq9cwlGCUYJRglGCUYJRgmW4BolGCUYJRglGCUYJRglWIJRglGCUYJRglGCUYIlGK0L0boQrQvRLY1uaXRLo3cuwSjBKMEowSjBKMEowRJcowSjBKMEowSjBKMEowRLMEowSjBKMEowSjBKsASjdSFaF6J1Ibql0S2Nbmn0ziUYJRglGCUYJRglGCVYgmuUYJRglGCUYJRglGCUYAlGCUYJRglGCUYJRgmWYLQuROtCtC5EtzS6pdEtjd65BKMEowSjBKMEowSjBEtwjRKMEowSjBKMEowSjBIswSjBKMEowSjBKMEowRKM1oVoXYjWheiWRrc0uqXRO5dglGCUYJRglGCUYJRgCa5RglGCUYJRglGCUYJRgiUYJRglGCUYJRglGCVYgtG6EK0L0boQ3dLolka3NHrnEowSjBKMEowSjBKMEizBNUowSjBKMEowSjBKMEqwBKMEowSjBKMEowSjBEswWheidSFaF6JbGt3S6JZG71yCUYJRglGCUYJRglGCJbhGCUYJRglGCUYJRglGCZZglGCUYJRglGCUYJRgCUbrQrQuROtCdEujWxrd0uidSzBKMEowSjBKMEowSrAE1yjBKMEowSjBKMEowSjBEowSjBKMEowSjBKMEizBaF2I1oVoXYhuaXRLo1savXMJRglGCUYJRglGCUYJluAaJRglGCUYJRglGCUYJViCUYJRglGCUYJRglGCJRitC9G6EK0L0S2Nbml0S6N3LsEowSjBKMEowSjBKMESXKMEowSjBKMEowSjBKMESzBKMEowSjBKMEowSrAEo3UhWheidSG6pdEtjW5p9M4lGCUYJfi8lGCUYJRglGCUYJRg/OfUx4kSjN65BA8gTk8wSjBKsASjBKMEowSjBKMEowTj3HUhWhfisi50S6NbGt3S6HMWSjBKMEqwBKMEowSjBKMEH0MJRglGCUYJRglGCUYJlmCUYJRglGCUYJRglGAJRutCtC5E60J0S6NbGt3S6J1LMEowSjBKMEowSjBKsATXKMEowSjBKMEowSjBKMESjBKMEowSjBKMEowSLMFoXYjWhWhdiG5pdEujWxq9cwlGCUYJRglGCUYJRgmW4BolGCUYJRglGCUYJRglWIJRglGCUYJRglGCUYIlGK0L0boQrQvRLY1uaXRLo3cuwSjBKMEowSjBKMEowRJcowSjBKMEowSjBKMEowRLMEowSjBKMEowSjBKsASjdSFaF6J1Ibql0S2Nbmn0ziUYJRglGCUYJRglGCVYgmuUYJRglGCUYJRglGCUYAlGCUYJRglGCUYJRgmWYLQuROtCtC5EtzS6pdEtjd65BKMEowSjBKMEowSjBEtwjRKMEowSjBKMEowSjBIswSjBKMEowSjBKMEowRKM1oVoXYjWheiWRrc0uqXRO5dglGCUYJRglGCUYJRgCUYJRglGCT4RJRglGCUYJRglGCUYJViCUYJRglGCUYLRuhCtC60L0S2Nbml0S6PPWSjBKMHonUswSjBKMEowSjBKMEqwBKMEowSjBKMEowSjBEswSjBKMEowSjBKMFoX4geRwR4CsNdxhAAAAABJRU5ErkJggg==');"

我已经从您的网站上获取了http://lasersurveying.com/wp-content/themes/twentysixteen/images/home/background-lines.png并且它已经基于它了，这样做的原因是电子邮件客户端倾向于阻止外部图像加载，因为它们被用于跟踪和诸如此类的东西，但是内部的任何东西通常没关系。

Answer 2

试试这个

＆＃13;

＆＃13;

.hashed-bg {
  background: repeating-linear-gradient( -45deg, #858585, #858585 2px, #777777 2px, #777777 20px);
}

＆＃13;

<div class="hashed-bg" style="height:100px"></div>

＆＃13;

＆＃13;

＆＃13;

}