HTML / CSS：在图像上添加响应框+文本

Question

我有一个网站www.weardenali.com。该网站的一部分有一个图像横幅，我想用彩色框和一些文字覆盖，就像Bellroy.com有他们的一样。

这就是我所拥有的，一个没有响应的失败代码：

穿Denali（我的网站）：

Bellroy：

这是我现在使用的代码：

.image-banner-content.content-left {
  padding-left: 1% !important;
}
.sf-animation.image-banner-content,
.sf-animation[data-animation="none"].image-banner-content {
  bottom: 80% !important;
}
a.link:hover,
a.link:active {
  text-decoration: underline;
  color:#F03E3E !important;
}

<div style="margin-bottom: 60%; float: left; display: inline-block; padding: 0px 10px 5px 10px; background-color: #ffffff; position: relative;">
  <h3>
    <span style="color: #0e3559;">
      Designed by Urban Adventurers
    </span>
  </h3>
  <h4>
    <a href="http://weardenali.com/" class="link" style="color: #0e3559; float: left; font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; font-size: 12px; letter-spacing: 1.2px;">
      &gt; SHOP NOW
    </a>
  </h4>
</div>

我感谢任何建议/指示。

Answer 1

假设您的图片横幅广告有点好......这应该有效：

<!--- code for the image banner --->
<div class="MyAdvertisement">
    <h3>Designed by Urban Adventurers</h3>
    <a href="http://weardenali.com/">
       <i class="fa fa-chevron-right" aria-hidden="true"></i> 
       SHOP NOW
    </a>
</div>
<!--- end code for the image banner --->

请注意，我为＆gt;添加了Font Awesome代码。你在那里。使用字形的方式对于没有视力的用户来说很烦人。谷歌字体真棒。很不错。

我不确定你想要做什么。我会为您提供像素值的css，但如果您希望按照浏览器的比例进行响应，请使用百分比。

.MyAdvertisement {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: auto;
overflow: hidden;
background: white;
}

如果您无法将代码放在我建议的位置，那么在任何人以任何有意义的方式为您提供帮助之前，您都必须告诉我们有关您的网站代码的更多信息。

祝你好运＆amp;玩得开心。