如何在Laravel邮件模板中显示background-image背景图片

由于不同邮箱客户端对CSS的支持差异较大，尤其是Outlook这类客户端对background-image的支持有限，下面提供几种兼容主流客户端的实现方式：

1. 内联CSS直接设置（基础方案） #

直接在邮件模板的容器元素中使用内联样式设置背景图片，这是最通用的方式，大部分现代邮箱客户端都支持：

<div style="background-image: url('{{ asset('images/email-background.jpg') }}'); 
            background-size: cover; 
            background-repeat: no-repeat; 
            background-color: #f5f5f5; /* 图片加载失败时的备用颜色 */
            min-height: 600px; 
            padding: 20px;">
    <!-- 邮件正文内容 -->
    <h1>欢迎订阅</h1>
    <p>这是您的邮件内容...</p>
</div>

• 注意：asset()函数会生成应用的完整图片URL，确保图片存放在public/images目录下；如果图片存储在云存储（如S3），可以使用Storage::url('path/to/image.jpg')生成可访问链接。

2. 兼容Outlook的VML方案 #

Outlook对CSS背景图片支持不佳，需要通过VML（Vector Markup Language）来兼容：

<!--[if mso]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="{{ asset('images/email-background.jpg') }}" color="#f5f5f5"/>
</v:background>
<![endif]-->
<div style="background-image: url('{{ asset('images/email-background.jpg') }}'); 
            background-size: cover; 
            background-repeat: no-repeat; 
            background-color: #f5f5f5;
            min-height: 600px; 
            padding: 20px;">
    <!-- 邮件正文内容 -->
</div>

• 条件注释<!--[if mso]>会让Outlook加载VML背景，其他客户端则使用CSS背景，实现多端兼容。

3. 复用布局组件（Laravel最佳实践） #

如果多个邮件模板需要相同背景，可以创建一个布局模板，让其他邮件模板继承：

创建布局文件resources/views/emails/layouts/main.blade.php：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ $title ?? '通知邮件' }}</title>
</head>
<body style="margin: 0; padding: 0;">
    <!--[if mso]>
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
        <v:fill type="tile" src="{{ asset('images/email-bg.jpg') }}" color="#f5f5f5"/>
    </v:background>
    <![endif]-->
    <div style="background-image: url('{{ asset('images/email-bg.jpg') }}'); 
                background-size: cover; 
                background-repeat: no-repeat; 
                background-color: #f5f5f5;
                min-height: 600px; 
                padding: 30px;">
        @yield('content')
    </div>
</body>
</html>

在具体邮件模板中继承布局：

@extends('emails.layouts.main')

@section('title', '订单确认邮件')

@section('content')
    <div style="background: white; padding: 20px; border-radius: 8px;">
        <h2>您的订单已确认</h2>
        <p>订单号：{{ $order->id }}</p>
        <!-- 其他订单信息 -->
    </div>
@endsection

额外注意事项 #

• 图片压缩：尽量压缩背景图片大小，避免邮件体积过大被邮箱服务商拦截。
• 测试验证：使用Mailtrap等工具测试邮件在不同客户端（如Gmail、Outlook、Apple Mail）的显示效果。
• 绝对URL：所有图片链接必须是完整的绝对URL，不能使用相对路径，否则邮箱无法加载图片。

内容的提问来源于stack exchange，提问作者obernal