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

Question

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

sn-p 的代码是这样的

<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 的位置是不固定，但其放置位置：绝对； 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;
}

Answer 2

能够让它工作，在大多数情况下

(a) 在 imgContainer 中更改 background-size: 100% 100% 和

(b) 在 goto_btn 中以 % 值证明 bottom、left 和 right

这确实在某些边缘情况（如 Galaxy Note 3）中拉伸了背景图像，但在大多数情况下，它工作得很好。取决于每个断点的图像大小（jpg）。