CSS - как визуализировать кнопки поверх фонового изображения? - PullRequest
Новая
       140

CSS - как визуализировать кнопки поверх фонового изображения?

0 голосов
/ 06 августа 2020

Hello Stack Overflow,

В настоящее время я работаю над созданием компонента, который будет иметь фоновое изображение, и на этом фоновом изображении я хочу отображать кнопки точно над определенным разделом фонового изображения. . Я намерен сделать этот размер изменяемым - кнопки должны оставаться в определенной области, несмотря на соотношение сторон.

Вот как это выглядит со стандартной компоновкой: https://imgur.com/a/IzKLUI7

Вот как это выглядит, если я поиграю с соотношением сторон: https://imgur.com/a/TqZkAsA

Редактировать: это ссылка на кодовый ящик, в котором есть воспроизведение последнего дизайна, который я был работает с: 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%;
}

1 Ответ

0 голосов
/ 06 августа 2020

Это то, что вы ищете? 

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