在雅虎电子邮件中设置背景图像的问题答案

【问题标题】：Issue to set background image in yahoo email在雅虎电子邮件中设置背景图像的问题
【发布时间】：2017-07-16 02:21:03
【问题描述】：

我设置了background image in email templates。向Gmail 发送电子邮件但在yahoo 中打开电子邮件时工作正常。不显示背景图片。

在雅虎电子邮件中显示图像的任何特定设置。

在我的电子邮件模板代码下方。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="background: url(http://domain.com/images/abc.jpg) top; background-size:cover;">
    <div class="abc">
        <p>Hello,</p>
        <p></p>
        <p>Welcome</p>
        <p>Thanks</p>
    </div>
</body>
</html>

任何人都有这方面的经验。

【问题讨论】：

标签： css image email

【解决方案1】：

样式属性中有引号，需要转义或更改为单引号。

style="background: url('http://domain.com/images/abc.jpg') top; background-size:cover;"

【讨论】：

哦...不抱歉...我在复制时出错了..没有引号问题。

【解决方案2】：

有很多方法可以在 HTML 中添加背景图像。在为所有电子邮件客户端（甚至 Outlook）编写背景图像时，我的代码曾经有很多回退。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body background="http://domain.com/images/abc.jpg" style="background: url('http://domain.com/images/abc.jpg') top; background-image:url('http://domain.com/images/abc.jpg');">
    <div class="abc">
        <p>Hello,</p>
        <p></p>
        <p>Welcome</p>
        <p>Thanks</p>
    </div>
</body>
</html>

我认为您正在寻找的是背景图像。

干杯

【讨论】：

不抱歉。没有工作。为什么雅虎删除背景图片不知道。
尝试删除 `background-size:cover;` 看看是否有任何作用？

【解决方案3】：

我收到了solution。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <div class="abc"  style="background-image: url(http://domain.com/images/abc.jpg); background-size:cover;">
        <p>Hello,</p>
        <p></p>
        <p>Welcome</p>
        <p>Thanks</p>
    </div>
</body>
</html>

我在gmail and yahoo都收到了完美的电子邮件。

感谢谁试图解决我的问题。

【讨论】：

【解决方案4】：

目前，您可以为 Yahoo和 Outlook 以及 Gmail 设置它。请务必添加绝对图像路径。在 Outlook 2016 上测试，无法判断早期版本。

这是一个例子：

<div style="width: 300px;
height: 42px;
background: url('ribbon.png') no-repeat transparent;
margin: 0 auto;">
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:300px;height:42px;">
        <v:fill type="tile" src="ribbon.png" color="#7bceeb" />
        <v:textbox inset="0,0,0,0">
    <![endif]-->
    <div>
         Some text for the div, that has BG behind it.
    </div>
    <!--[if gte mso 9]>
    </v:textbox>
    </v:rect>
    <![endif]-->
</div>

【讨论】：

这家伙使用的是绝对图像路径，而您的示例使用的是相对路径。

【解决方案5】：

对于 Yahoo，关键是 url 使用单引号（或者如果您在单引号中使用属性，则可能是双引号）。

所以它必须是：

<body style="background: url('http://example.com/images/abc.jpg') top;">
  ...
</body>

如果 url 中没有单引号，Yahoo 解析器将拒绝该位。

【讨论】：

【解决方案6】：

对我来说，user1780370's answer 是解决方案的一部分。主要问题是使用正斜杠语法来表示背景大小，如下所示。

<div style="background: url('https://background.png') no-repeat center / cover;>

显然，雅虎"removes slash syntax values and makes the value invalid."。

解决方法是分离背景大小：

<div style="
  background: url('https://background.png') no-repeat center;
  background-size: cover;"
>

【讨论】：

这个答案应该更多是评论而不是答案。如果其他答案缺少某些信息。