Как я мог поместить свое фоновое изображение позади Navbar в реакции?

Question

Я пытаюсь поместить фоновое изображение позади моего Navbar в реакции. Конечный результат должен выглядеть примерно так: https://www.salient.com/. Я попытался установить фон панели навигации равным none и transparent, в результате оба не работали. Я также попытался поместить мое фоновое изображение и мою панель навигации в один div, но они все еще разделены.

Это мой основной App.js файл:

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Router>
          <NavigationBar />
          <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/projects" component={Projects} />
              <Route path="/contact" component={Contact} />
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}

export default App;

А это мой Home.js (я использую App.js для вещей, которые я хочу разместить на всех страницах, и отделяю файлы типа Home.js или Project.js для определенных c страниц, довольно новые, чтобы реагировать, поэтому я новичок во всем этом):

class Home extends Component {
    render() {
        return (
            <div>
                (putting an image here puts the image under the nav bar, not as a background image)
            </div>
        );
    }
}

export default Home;

Это Navbar ("NavigationBar"):

export const NavigationBar = () => (
    <Styles>
        <nav class="navbar navbar-light navbar-dark imageWrapper">
            <ul class="links">
                <li>
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li>
                    <a class="nav-link" href="/projects">Projects</a>
                </li>
                <li>
                    <a class="nav-link" href="/contact">Contact</a>
                </li>
            </ul>
        </nav>
    </Styles>
)

В настоящее время мое приложение реагирования выглядит как this .

Любая помощь / совет любого рода очень ценится!

Answer 1

Локальный импорт изображений в React работает несколько иначе из-за его комплектации. Изображение здесь может загружаться неправильно. Я бы порекомендовал изменить импорт так, чтобы он выглядел следующим образом:

nav.imageWrapper div.img { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  max-height: 70vh;
  background-size: cover;
  background-image: url('../images/background.jpg'); //replace background, wrap in URL reference
}

Если у вас также возникают проблемы с импортом изображений напрямую, вы можете прочитать больше в этом обсуждении .

Answer 2

Используйте эти стили для вашего изображения и его тега div. Он должен располагаться вверху. Вы должны убедиться, что изображение находится внутри компонента nav, чтобы позиционировать его соответственно.

<nav class="navbar navbar-light navbar-dark imageWrapper">
            <ul class="links">
                <li>
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li>
                    <a class="nav-link" href="/projects">Projects</a>
                </li>
                <li>
                    <a class="nav-link" href="/contact">Contact</a>
                </li>
            </ul>
            <div className="img"></div>
        </nav>


nav.imageWrapper{
    position: relative
}

nav.imageWrapper div.img { position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    max-height: 70vh;
    background-size: cover;
background: url('../images/background.jpg');
z-index: -1
}

https://stackblitz.com/edit/react-kliqc3?file=index.js (проверьте этот пример)