样式帮助：React.js中带有Material UI的透明appbar

Question

我正在使用材质ui，并且我一直在尝试使navabr透明并获得其背后的背景图像（与stripe.com类似的样式），并且我无法将图像移至其后并使其透明。

有没有办法让它看起来像Stripe.com，透明的应用栏和背景图像就会向上移动？主要问题是将背景图像上移

Code for the Navbar 

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Checkbox from '@material-ui/core/Checkbox';
import TextField from '@material-ui/core/TextField';
import { Link } from 'react-router-dom'


// Styling for our navbar
const styles = {
  root: {
    flexGrow: 1,
  },
  grow: {
    flexGrow: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  button: {
    margin: 10,
    fontSize: 17
  },
  text: {
    textAlign: 'center',
    fontSize: 20,

    padding: '0.5em'
  },
  textField: {
    align: 'center',
    width: 500
  }
};

const MyLink = props => <Link to="/signup" {...props} />

// here is our navbar
class Navbar extends React.Component{
    state = {
     open: false,
   };

   handleClickOpen = () => {
     this.setState({ open: true });
   };

   handleClose = () => {
     this.setState({ open: false });
   };

   state = {
   checkedA: true,
   checkedB: true,
   checkedF: true,
 };

 handleChange = name => event => {
   this.setState({ [name]: event.target.checked });
 };

    render(){
      const { classes } = this.props
      return (
    <div className={classes.root}>
      <AppBar position="static" color="inherit" style={{ background: 'transparent', boxShadow: 'none'}}>
        <Toolbar>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">

          </IconButton>
          <Typography variant="h6" color="inherit" className={classes.grow}>

          </Typography>
          <Button color="inherit" onClick={this.handleClickOpen}>Login</Button>

        </Toolbar>
      </AppBar>
      <Dialog
         open={this.state.open}
         onClose={this.handleClose}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description">
       <DialogTitle id="alert-dialog-title">{"Have an account? Log In"}</DialogTitle>
         <DialogContent>
           <DialogTitle>
              <Button variant="contained" color="primary" className={classes.button}>
                Sign In with Facebook </Button>
                <Button variant="contained" color="primary" className={classes.button}>
             Sign In with LinkedIn </Button>
        </DialogTitle>
       <DialogContentText className={classes.text}>
               or
      </DialogContentText>

      <form>
           <TextField
                     id="filled-email-input"
                     label="Email"
                     className={classes.textField}
                     type="email"
                     name="email"
                     autoComplete="email"
                     margin="normal"
                     variant="filled"
                   />
           </form>
        <form>
        <TextField
          id="filled-password-input"
          label="Password"
          className={classes.textField}
          type="password"
          autoComplete="current-password"
          margin="normal"
          variant="filled"
        />
        </form>
        <Checkbox
          checked={this.state.checkedG}
          onChange={this.handleChange('checkedG')}
          value="checkedG"
          color= "inherit"
        />
        <DialogContentText>
           Remember Me?
       </DialogContentText>
         </DialogContent>
         <DialogActions>
           <Button component={MyLink} color="primary" autoFocus>
             Don't have an account? Sign Up
           </Button>
         </DialogActions>
       </Dialog>
    </div>
  );
}
}

// requiring a class object
Navbar.propTypes = {
  classes: PropTypes.object.isRequired,
};



export default withStyles(styles)(Navbar);

这是Lading页面标题/背景的代码

import React, {Component} from 'react';
import Background from '../img/fixedImg.png';
import './Header.css';
import { Link } from 'react-router-dom';


const headerStyle = {
  backgroundImage:  `url( ${Background} )`,
  height: '100vh',
  backgroundSize: 'cover'
}

// class component for our image on the home page
// the <br> needs fixing in the css file
class Header extends Component {
  render() {
    return (
       <header style={headerStyle}>
             
          <h1>Hashtag Hound </h1>
          <p> Connecting influencers with brands </p>
          <Link to="/signup">Find an Influencer</Link>
       </header>

    );
  }
};


export default Header;

这是CSS

header {
  margin: 0 auto;
  text-align: center;

}


header h1 {
  margin: 0;
  font-family: arial;
  font-size: 4rem;
  color: #383636;

}


header p {
  font-weight: 700;
  font-size: 1.75rem;
  font-family: arial;
  color: #383636;
}

header a {
  box-shadow: 0 3px 3px 0 rgb(0,0,0,1);
  font-weight: 700;
  font-size: 1.2rem;
  background-color: black;
  border-color: black;
  color: white;
  padding: 1.25rem 2.5rem;
  border-radius: 2rem;
  text-decoration: none;
  font-family: arial;
  display: inline-block;
}