Question

现在我在Magento 2中工作。我在使用谷歌浏览器调整大小时，带有按钮的背景图像无法保持不变。

.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＆Grid放置元素而不是像素，否则它们将极大地限制您的位置。您可以尝试对<div>使用display：flex并将元素放置在flex容器中（尝试与Inspector一起玩）。

以下是关于flexbox的一些好东西： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

网格： https://css-tricks.com/snippets/css/complete-guide-grid/

响应背景图像的按钮

1 个答案: