向下推送内容的透明导航菜单

我正在寻找制作透明导航栏的最佳方法，该导航栏将其他div推到其下方。

我现在实现透明导航栏的方法是赋予它位置：绝对。但这会使页面上的下一个div 位于其顶部/后面。

编辑：

我正在使用Ruby on Rails 5.2.0 RC1并使用bootstrap 4。

这是我的应用程序中的身体标签内的内容.html.erb：

<body>
<% if notice %>
  <p class="alert"><%= notice %></p>
<% end %>
<% if alert %>
  <p class="alert"><%= alert %></p>
<% end %>
<header>
  <div class="container-fluid">
    <div class="container">
      <nav class="navbar navbar-expand-sm navbar-light">
        <%= link_to root_path, class: 'navbar-brand' do %>
          <%= image_tag 'logo.png' %>
        <% end %>
        <button class="navbar-toggler" 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>
        <div class="collapse navbar-collapse " id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <%= link_to 'Bonnets', products_path, class: 'nav-link' %>
            </li>
            <li class="nav-item">
              <%= link_to 'About', about_path, class: 'nav-link' %>
            </li>
            <li class="nav-item">
              <%= link_to 'Contact', new_message_path, class: 'nav-link' %>
            </li>
            <li class="nav-item dropdown d-sm-none d-md-block">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="flag-icon flag-icon-no">
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#"><span class="flag-icon flag-icon-us"></a>
              </div>
            </li>
          </ul>
          <div class="form-inline">
            <i class="fas fa-shopping-bag fa-3x side-item"></i>
            <button class="btn btn-sm btn-outline-secondary" type="button">Checkout</button>
          </div>
        </div>
      </nav>
    </div>
  </div>
</header>

<%= yield %>
<footer>
  <div class="inner-footer">
    <div class="container-fluid">
      <div class="form-inline payment-icons justify-content-center">
        <i class="fab fa-cc-visa fa-3x"></i>
        <i class="fab fa-cc-mastercard fa-3x"></i>
        <i class="fab fa-cc-stripe fa-3x"></i>
        <i class="fab fa-cc-paypal fa-3x"></i>
      </div>
      <ul class="nav justify-content-center">
        <li class="nav-item">
          <%= link_to 'Bonnets', products_path, class: 'nav-link' %>
        </li>
        <li class="nav-item">
          <%= link_to 'About', about_path, class: 'nav-link' %>
        </li>
        <li class="nav-item">
          <%= link_to 'Contact', new_message_path, class: 'nav-link' %>
        </li>
      </ul>
      <div class="d-flex copyright justify-content-center">
        <p>Copyright <%= Date.today.year %> © <strong>Muli Clothing</strong></p>
      </div>
    </div>
  </div>
</footer>

这是导航栏的相关 css：

header {
  position: absolute;
  width: 100%;
}

这是我主页的代码：

<div class="container-fluid home banner">
    <div class="text-box">
      <div class="text-box-inner">
        <h1 class="uppercase">The better to clothe you with, my dear</h1>
        <button class="btn"><%= link_to 'BUY NOW' %></button>
      </div>
    </div>
</div>

和我的主页的css：

.home {
  background: image-url('laughter.jpg');
}
.banner {
  background-size: cover;
  height: 100vh;
}

更新：

您的导航和内容将具有自己的高度属性，但您将背景图像放置在div 中，该div 是这两个属性的包装器。然后，您可以在内容容器上设置所需的任何不透明度级别。

.wrapper {
  width:1024px;
  float:left;
  height:auto;
  background-image:url("https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_1280.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50% 50%;
}
.nav, .content {
  width:100%;
  float:left;
  color:white;
  background-color:rgba(255, 255, 255, 0.2);
}
.nav {
  height:50px;
}
.content {
  height:auto;
}

<div class="wrapper">
  <div class="nav"> Nav </div>
  <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae sapien dapibus, sodales ex vitae, fringilla sapien. Sed varius pulvinar sem a eleifend. Aliquam id enim et mauris efficitur porta. Pellentesque mattis turpis non sollicitudin volutpat. Aliquam erat volutpat. Curabitur blandit lectus ut eleifend interdum. Nulla eu rhoncus metus, at facilisis dolor. Suspendisse a quam ut sapien pulvinar volutpat. Donec at elit ligula. Nunc condimentum blandit consectetur. </div>
</div>

相关内容

最新更新

热门标签：