Question

我制作的网站两个组件：标题，页脚和它们之间有视图，如主页或其他页面。

主页：

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中。

React，组件和视图

0 个答案: