CSS - 如何在背景圖像上渲染按鈕？

Question

你好堆棧溢出，

我目前正在構建一個具有背景圖像的組件，並且在這個背景圖像上，我想在背景圖像的某個部分上精確呈現按鈕。 我的目的是使這個可調整大小 - 盡管縱橫比，按鈕應該保持在某個區域上。

這是標准布局的樣子： https://imgur.com/a/IzKLUI7

如果我使用縱橫比，這就是它的樣子： https://imgur.com/a/TqZkAsA

編輯：這是一個代碼框的鏈接，它具有我正在使用的最新設計的再現： https://codesandbox.io/s/keen-rgb-do24t 。

每當我調整頁面的縱橫比時，是否有可能在背景圖像的特定區域上仍然有這些按鈕？ 如果我調整 window 的大小，我注意到按鈕會飛離背景圖像。 我在下面附上了我的代碼。

應用：

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;
}