Question

我的电子邮件代码有问题。它在Atom中可以正常工作，但是当我在MailChimp中将其复制时，它将无法正常工作，图片不再对齐，并且按钮不会仅显示在图片上。我是编码的初学者，所以如果我的错误很大，请不要苛刻！

我尝试将图像设为背景，并更改背景的位置以及图像后的位置，

<!DOCTYPE html>


<style>
.container {
position: relative;
width: 200%;
max-width: 400px;
text-align: right;
 }

.container img {
 width: 100%;
 height: auto;
 align-content: center;
 text-align: center;
 display: table;
 margin: auto;

 }

.container .btn {
 position: absolute;
 top: 85%;
 left: 110%;
 transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 background-color: #FF6500;
 background: -webkit-linear-gradient(left, #FF6500, #F79838);
 color: white; 
 display: table;
 margin: auto;
 font-size: 16px;
 font-family: Roboto;
 text-align: center;
 padding: 12px 100px;
 border: 2px;
 width: 70px;
 overflow: hidden;
 white-space: nowrap;
 cursor: pointer;
 border-radius: 5px;

  }

  .container .btn:hover {
    background-color: black;
     }
  </style>




  <div class="container">
  <img src="https://gdurl.com/SRlk" alt="Click here" 
   style="width:150%">
   <a href="https://lentii.com"
   ></a>
   <button class="btn">Find carpool</button>
   </div>

  </html>
  </body>

图像上的按钮

0 个答案: