Question

Hello Stack溢出

我目前正在构建一个具有背景图像的组件，并且要在该背景图像上准确地在背景图像的特定部分上渲染按钮。我的目的是使它可调整大小-尽管宽高比大，按钮也应保持在一定的区域上。

下的样子

编辑：这是指向codeandbox的链接，其中包含我正在使用的最新设计的摘要：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;
}

CSS-如何在背景图片上方渲染按钮？

1 个答案: