我制作的网站两个组件:标题,页脚 和它们之间有视图,如主页或其他页面。
主页:
import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import Logo from "../../img/logo.png"
import '../../styles/Home.css';
import pic from '../../img/pic.jpg';
import { Divider } from 'material-ui';
const style = {
margin: 4,
};
class HomePage extends Component {
render() {
return (
<div className="Home">
<div className="parallax">
<div className="Box">
<img src={Logo}/>
<div id="buttons">
<RaisedButton className="button" label=" Download... " primary={true} style={style} />
<RaisedButton className="button" label="Discover Features" primary={true} style={style} />
</div>
</div>
</div>
<div className="info">
</div>
</div>
);
}
}
export default HomePage;
和他的css:
.Home{
height: 100vh;
width: 100%;
}
.Box{
position: relative;
text-align: center;
padding: 20vh;
}
.parallax{
background-image: url("../img/pic.jpg");
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.info{
background-color: #1e8449 ;
height: 100%;
background-attachment: fixed;
}
问题是在主页中我在div中有一个视差img和绿色div(className =&#34; Home&#34;)但是当我在google chrome 上分析它时,它似乎是绿色的div和视差img不在同一个div中。