html - 背景图像上的响应式设计 css 按钮，调整大小时固定位置问题

Question

我正在编写一个响应式网页，其中有一个背景图片和一个按钮。该按钮需要位于图像上的特定位置。现在我正在创建一个带有背景图像的 div(对于移动设备、平板电脑和桌面断点不同)，我在图像上创建了一个 css 按钮。当我调整窗口大小时，在同一断点内，背景图像调整大小但 css 按钮放置在 w.r.t 背景 div 的父容器中并因此移动。

代码片段看起来像

<div class="imgContainer">
    <a href="/gotohere.html">
        <span class="goto_btn">Click here</span>
    </a>
</div>

移动断点的css代码看起来像

.imgContainer {
    background-image: url("mobile.jpg");
    height: 18em;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
    position: relative;
}


.goto_btn {
    bottom: 3.5em;
    font-size: 15px;
    right: 4em;
    background-color: #1867C3;
    border-radius: 10px;
    color: #FFFFFF;
    display: block;
    float: right;
    font-family: Helvetica Neue,arial,sans-serif;
    font-weight: 700;
    margin-top: 75%;
    padding: 10px 58px;
    position: absolute;
    text-shadow: 2px 1px #000000;
    text-transform: uppercase;
}

现在我可以类似地为平板电脑和台式机创建这样的 css 规则，它看起来不错，但问题出在同一个断点内，比如说移动设备，对于不同的屏幕尺寸，比如 iphone 5 和 galaxy S4 屏幕，goto_btn 的位置是虽然它的放置位置不固定:absoulte； w.r.t imgContainer 是 position:relative;

我能否以某种方式将 goto_btn 与 imagConatainer div 固定在一起，以便断点内的任何大小调整都能保持按钮相对于背景图像的相对位置固定？

任何帮助将不胜感激。

谢谢

Answer 1

我根据你的 .imgContainer width 和 height 标签设置你的按钮位置

.imgContainer {
    background-image: url("mobile.jpg");
    height: 18em;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
}


.goto_btn {
    font-size: 15px;
    background-color: #1867C3;
    border-radius: 10px;
    color: #FFFFFF;
    display: block;
    font-family: Helvetica Neue,arial,sans-serif;
    font-weight: 700;
    padding: 10px 58px;
    position: absolute;
    top:16em;
    right:2em;
    text-shadow: 2px 1px #000000;
    text-transform: uppercase;
}