我习惯于将英雄图像创建为背景图像,并在顶部将英雄按钮覆盖为相对/嵌入式组件。
今天,我得到的英雄形象上面有文字(请参阅下文)。英雄按钮应该位于显示“签出开放注册概述...”的文本下方。但是,发生了两件事: 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;
}
答案 0 :(得分:-1)
将文本烘焙到图像中不是最佳实践。最好您将用html构建文本部分。这样可以使它们相对彼此定位。