按钮响应背景图像

Question

现在我在Magento 2中工作。我遇到了一个问题，当我在谷歌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&网格来定位你的元素而不是像素，bc它们会极大地限制你。您可以尝试对<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/