Html 如何在图像上添加文本和按钮

我试着在这样的图像上放置文本和按钮。有人能帮忙吗

这就是我尝试过的。问题是它在outlook电子邮件中确实正确呈现

CSS:

HTML:

按钮

查看链接：

/*包含图像和文本的容器*/
.集装箱{
位置：相对位置；
文本对齐：居中；
颜色：白色；
}
/*底部居中文本*/
.底部中心{
位置：绝对位置；
底部：8px；
左：45%；
}
/*居中文本*/
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

底部中心
居中的

试试这个

.container{
位置：相对位置；
宽度：100%；
最大宽度：400px；
}
.集装箱img{
宽度：100%；
身高：100%
}
.container.btn{
位置：绝对位置；
底部：10px；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
背景色：#55A646；
颜色：白色；
字体大小：16px；
填充：12px 24px；
边界：无；
光标：指针；
边界半径：5px；
文本对齐：居中；
}
.container.btn:悬停{
背景色：#00cc00；
}
h4{
位置：绝对位置；
最高：40%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
颜色：#fff；
背景：#111；
填充：7px；
}

桌扇
扇子

您尝试了什么，到目前为止您的HTML结构和CSS是什么？@G-Cyrillus:更新了代码问题。

 .container {
      position: relative;
      width: 100%;
      max-width: 400px;
    }
    
    .container img {
      width: 100%;
      height: auto;
    }
    
    .container .btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      background-color: #55A646;
      color: white;
      font-size: 16px;
      padding: 12px 24px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      text-align: center;
    }
    
    .container .btn:hover {
      background-color: #55A646 ;
    }

<div class="container">
  <img src="http://image.com" alt="" style="width:100%">
  <button class="btn">Button</button>
</div>