屏幕水印中心-无拉伸

Question

我试图发送一个带有证书的HTML电子邮件。

1. ，因为它是一个证书，我需要标志作为水印图像( PNG )作为HTML
2. 的背景，水印必须是电子邮件的中心。
3. ，水印PNG不应该拉伸

。

问题是图像没有到达中心。另外，如果我删除分区的宽度和高度，水印就会消失。

这里是我的

<div id="watermark">
            <img src="https://js.pngtree.com/web3/images/home/web_heart_animation.png" height="110%" width="100%" />
        </div>

这里是我的CSS

        body{
        font-family: 'Arial';
    }
    #watermark {
                position: fixed;

                /** 
                    Set a position in the page for your image
                    This should center it vertically
                **/
                bottom:   3cm;
                left:     -1cm;

                /** Change image dimensions**/
                width:    22cm;
                height:   22cm;

                /** Your watermark should be behind every content**/
                z-index:  -1000;
            }
@media print {
  #footer {
    position: fixed;
    bottom: 0;
  }
}

Answer 1

1.HTML电子邮件不同于普通的HTML代码，因为大多数电子邮件引擎都不支持标题中的CSS样式表或CSS。您需要编写内联CSS。

1. 您必须使用HTML表以使它在Outlook、Gmail ..etc

中保持一致并看起来很好看。

How make background image on newsletter in outlook?电子邮件模板中的背景图像的解决方案：