如何为容器内叠加背景图添加点击唤起Outlook的邮件功能？

问题场景 #

需要实现容器内叠加背景图的点击功能：点击该区域时唤起Outlook并自动填入指定服务邮箱地址。尝试直接为图片添加href属性后，发现某个标题周围的背景消失了。

问题根源 #

你之前的操作可能错误修改了布局结构（比如直接给非<img>元素套<a>却未调整样式），或是冗余的HTML标签干扰了元素层级，导致背景显示异常。另外原代码里存在无用的<img class="overlay_image">标签和多余的闭合</div>，也会影响布局稳定性。

修复方案 #

1. 清理冗余HTML标签，消除布局干扰
2. 用<a>标签包裹叠加背景图容器，通过mailto:协议唤起Outlook，同时设置<a>标签样式保证点击区域正确，且不影响原有元素布局
3. 保留原有标题的定位逻辑，避免背景被遮挡或消失

修改后的HTML代码 #

<body>
  <div id="container">
    <div id="main_image"></div>
    <!-- 用a标签包裹叠加背景图容器，设置mailto链接 -->
    <a href="mailto:your-service-email@example.com" class="mail-link">
      <div id="overlay_image"></div>
    </a>
    <p class="header">FAe</p>
    <p class="header2">Contact</p>
    <p class="header3">02 44</p>
  </div>
</body>

修改后的CSS代码 #

#container{
    position: relative;
    width: 30cm;
    height: 7cm;
}
#main_image{
    width: 30cm;
    height: 7cm;
    background-image: url(Banner%20background.png);
}
/* 给mailto链接设置绝对定位，保证点击区域和背景图完全重合 */
.mail-link {
    position: absolute;
    bottom: 10px;
    right: 90px;
    width: 200px;
    height: 50px;
    display: block; /* 让a标签可以设置宽高 */
    text-decoration: none; /* 去掉默认下划线 */
}
#overlay_image{
    width: 200px;
    height: 50px;
    background-image: url(Send%20mail.png);
    background-size: 186px auto;
    background-repeat: no-repeat;
}

.header {
    color: rgba(0,0,0,1.00);
    font-size: 126px;
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-style: italic;
    position: relative;
    left: -100px;
    bottom: 350px;
}
.header2 {
    color: rgba(0,0,0,1.00);
    font-size: 50px;
    text-align: right;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-style: italic;
    position: relative;
    left: -99px;
    top: -621px;
}

.header3 {
    color: rgba(0,0,0,1.00);
    font-size: 35px;
    text-align: right;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-style: italic;
    position: relative;
    left: -200px;
    top: -656px;
}

关键改动说明 #

• 移除了原代码中无用的<img class="overlay_image">和多余的闭合</div>，减少布局干扰
• 将点击区域的<div id="overlay_image">包裹在<a>标签内，通过mailto:your-service-email@example.com指定唤起Outlook时要填入的邮箱地址（请替换成实际的服务邮箱）
• 给<a>标签设置position:absolute和与叠加背景图一致的宽高、位置，确保点击区域完全覆盖背景图，同时不会破坏原有元素的层级和背景显示
• 保留了原有标题的定位样式，避免背景消失的问题

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