CSS-如何在背景图像上呈现按钮

Question

Hello堆栈溢出，

我目前正在构建一个有背景图像的组件，在这个背景图像上，我想在背景图像的特定部分上渲染按钮。我的意图是使其可调整大小——无论纵横比如何，按钮都应该停留在某个区域上。

这是标准布局的外观：https://i.stack.imgur.com/rt6u1.jpg

如果我使用纵横比，这就是它的样子：https://i.stack.imgur.com/GBeWf.jpg

编辑：这是一个指向代码沙盒的链接，其中有我正在使用的最新设计的副本：https://codesandbox.io/s/keen-rgb-do24t.

有没有可能，每当我调整页面的纵横比时，我仍然会在背景图像的特定区域上使用这些按钮？如果我调整窗口的大小，我会注意到按钮会飞离背景图像。我在下面附上了我的代码。

应用：

import React, { Component } from 'react';
import './Home.css'
class Home extends Component    {
render()    {
return (
<div className="container">
<div className="box-one">
<button className="button"> Image One </button>
<button className="button2"> Image Two </button>
</div>
</div>
);
}
}

export default Home;

CSS：

.container {
background-image: url(../components/space_wallpaper.png);
background-repeat: no-repeat;
background-size: cover;
position: relative;
left: 10vw;
top: 10vh;
height: 80vh;
width: 80vw;
outline: 1px solid blue;
}
.box-one {
outline: 1px solid red;
display: flex;
}
.button {
position: absolute;
margin: 1% 1%;
}
.button2  {
position: absolute;
margin: 50% 50%;
}

Answer 1

这就是您想要的吗？

.container {
background-image: url(../components/space_wallpaper.png);
background-repeat: no-repeat;
background-size: cover;
position: relative;
left: 10vw;
top: 10vh;
height: 80vh;
width: 80vw;
outline: 1px solid blue;
}
.box-one {
outline: 1px solid red;
display: flex;
}