响应的按钮与背景图片

Question

现在我在Magento 2中工作，我遇到了一个问题，当我在google chrome中调整大小时，按钮的背景图像不会保持不变。

.botones1 {
    position: absolute;
    left: 400px;
    font-size: 22px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    background-color: #357b2b !important;
}

.botones1:hover {
    background-color: #9FCD4C !important;
}

.botones2{
    position: absolute;
    left: 796px;
    font-size: 22px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    background-color: #357b2b !important;
}

.botones2:hover {
    background-color: #9FCD4C !important;
}

<div class="container">
    <img src="https://placeimg.com/1000/480/any" alt="Smiley face">
        <a class="button botones1" href="#">Buy Coupon</a> 
        <a class="button botones2" href="#">Sell Coupon</a>
</div>

当我用移动设备输入时，我希望背景图片和按钮的大小是以响应的方式调整的，我希望它们保持在同一个地方。

谢谢。

Answer 1

如果你想让你的页面响应，你应该使用Flexbox & 网格来定位你的元素，而不是像素，因为他们会限制你大规模的。你可以尝试使用display:flex来定位你的元素。<div> 并将你的元素安排在flex容器中(试着用检查器来玩)。

这里有一些关于flexbox的好东西。https:/css-tricks.comsnippetscssa-guid-to-flexbox。

网格。https:/css-tricks.comsnippetscsscomplete-guid-grid。