时间戳

首页 > 解决方案 > 当英雄图像有文本时定位响应式英雄按钮

css - 当英雄图像有文本时定位响应式英雄按钮

问题描述

我习惯于创建一个英雄图像作为背景图像，并在顶部覆盖一个英雄按钮作为相对/内嵌组件。

今天，我收到了一张带有文字的英雄图片（见下文）。英雄按钮应该位于“检查开放注册概述...”的文本下方。但是，发生了两件事： 1. 当我像往常一样定位按钮时，当我缩小屏幕长度时，按钮不会停留在该文本下方。2. 按钮不会出现在主图上方，而是位于图像底部下方，不会出现在顶部。

英雄旗帜

<!-- Hero Image-->
  <div id="banner" class="row">
     <div class="col-xs-12">
        <img src="../img/headers/bannerHome_OpenEnrollment.png" class="img-responsive" alt="open enrollment" tabindex="0">
<!-- Hero Button -->
        <div class="hero-text">
              <button class="btn btn-secondary hero-text">Learn More <img src="../img/icons/btnArrow_white.png"></button>
        </div>
      </div>
  </div>
#banner .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
    background-color: #49c8f4;
    position: relative;
}
.img-responsive {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.hero-text button {
  border: none;
  position: absolute;
  margin-left: 150px;
  margin-bottom: 150px;
  outline: 0;
  display: inline-block;
  color: white;
  background-color: #003057;
  font-size: 24px;
  font-family: "Klinic Slab Medium";
  cursor:pointer;
}

标签： csspositioning

解决方案

将文本烘焙到图像中并不是最佳实践。您最好在 html 中构建文本部分。这将允许它们相对于彼此定位。

推荐阅读