Question

我正在撰写一个响应式网页，其上有一个背景图片和一个按钮。按钮需要位于图像上的特定位置。现在我正在创建一个带有background-image的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;

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

非常感谢任何帮助。

由于

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

这确实在一些边缘情况下（如星系注释3）延伸了背景图像，但对于大多数部分，它工作得很好。取决于每个断点的图像大小（jpg）。

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

2 个答案: