如何将图像放在东西后面而不使其成为背景图像？

Question

我正在使用 React-Bootstrap 并尝试完成此操作：transparent navbar

我希望导航栏是全宽的，而顶部带有图像+文字的横幅应该是 80% 并居中。我相信在这种情况下我不能将其作为背景图像，因为我不确定如何在保持导航栏 100% 的同时使容器的宽度为 80%。

例如，这段代码还缩小了菜单：

<div className="jumbo">
  <MyNavbar />
  <h1>text</h1>
</div>

在 style.css 中：

.jumbo {
  background-image: url("img.jpg"); 
  background-size: cover;
  text-align: center;
  width: 80%;
}

考虑到我正在尝试制作一个响应式网站，如果我这样做是不好的做法：

<MyNavbar />
<Image src="img.jpg" id="img">

在 style.css 中：

#img {
   top: -200px;
}

还有其他选择吗？谢谢！

Answer 1

试试这个。

#top-header {
  background: rgba(255, 0, 0, 0.36);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.w100 {
  width:80%;
  margin:0 auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test Code!</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <header class="bs-docs-nav navbar navbar-static-top" id="top-header">
        <div class="container">
            <div class="navbar-header">
                <button aria-controls="bs-navbar" aria-expanded="false" class="collapsed navbar-toggle" data-target="#bs-navbar" data-toggle="collapse" type="button">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="../" class="navbar-brand">Bootstrap</a>
            </div>
            <nav class="collapse navbar-collapse" id="bs-navbar">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">Getting started</a>
                    </li>
                    <li>
                        <a href="../css/">CSS</a>
                    </li>
                    <li class="active">
                        <a href="../components/">Components</a>
                    </li>
                    <li>
                        <a href="../javascript/">JavaScript</a>
                    </li>
                    <li>
                        <a href="../customize/">Customize</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="page-inner">
        <div class="img-section text-center">
            <img src="http://getbootstrap.com/assets/brand/bootstrap-social.png" class="img-responisve w100">
        </div>
    </div>
    <div class="container">
        <h2 class="bs-docs-featurette-title">Premium Bootstrap Themes</h2>
        <p class="lead">Take Bootstrap 4 to the next level with premium themes from our official marketplace—all built on Bootstrap with new components and plugins, docs, and build tools. </p>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

Answer 2

您可以使用background-position 和background-size 来完成工作。您必须单独设置文本样式，以便元素及其文本居中。

.jumbo {
  background-image: url("http://theartmad.com/wp-content/uploads/2015/09/Best-Desktop-Background-1.jpg");
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.navbar {
  background-color: rgba(226, 183, 226, 0.5);
}

h1 {
  text-align: center;
  width: 80%;
  /* margin:auto so that the div is centered */
  margin: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="jumbo">
  <nav class="navbar navbar-toggleable-md navbar-light">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  <h1>text</h1>
</div>