[英]CSS - how to render buttons on top of a background image?
Hello Stack Overflow,你好堆栈溢出,
I'm currently working on building a component that will have a background-image, and on this background-image I want to render buttons exactly over a certain section of the background image.我目前正在构建一个具有背景图像的组件,并且在这个背景图像上,我想在背景图像的某个部分上精确呈现按钮。 My intention is to make this resizeable - the buttons should stay over a certain area despite the aspect ratio.
我的目的是使这个可调整大小 - 尽管纵横比,按钮应该保持在某个区域上。
This is what it looks like with standard layout: https://imgur.com/a/IzKLUI7这是标准布局的样子: https://imgur.com/a/IzKLUI7
This is what it looks like if I play with the aspect ratio: https://imgur.com/a/TqZkAsA如果我使用纵横比,这就是它的样子: https://imgur.com/a/TqZkAsA
Edit: This is a link to a codesandbox which has a rendition of the latest design I was working with: https://codesandbox.io/s/keen-rgb-do24t .编辑:这是一个代码框的链接,它具有我正在使用的最新设计的再现: https://codesandbox.io/s/keen-rgb-do24t 。
Is it possible that whenever I resize the aspect ratio of the page, I will still have those buttons over the certain area of the background image?每当我调整页面的纵横比时,是否有可能在背景图像的特定区域上仍然有这些按钮? If I resize the window, I notice that the buttons will fly off the background image.
如果我调整 window 的大小,我注意到按钮会飞离背景图像。 I've attached my code below.
我在下面附上了我的代码。
Application:应用:
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: 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%;
}
Is this what you are looking for?这是你想要的?
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.