我正在寻找制作透明导航栏的最佳方法，该导航栏会推动其下方的div。
我现在实现透明导航栏的方式是给它位置：绝对。但这会使页面上的下一个div位于其后面/后面。
编辑：
我正在使用Ruby on Rails 5.2.0 RC1并使用bootstrap 4。
这是我的application.html.erb中的body标签里面的内容：
<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;
}
答案 0 :(得分：0)
更新：
您的导航和内容将拥有自己的高度属性，但您将背景图像放在一个div中，该div是这两者的包装。然后，您可以在内容容器上设置所需的任何不透明度级别。
apollo-server-express@1.3.2
graphql-sequelize@5.6.1
sequelize@4.35.1
dataloader-sequelize@1.6.3
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns:context="http://www.springframework.org/schema/context"
xmlns:jpa="http://www.springframework.org/schema/data/jpa"
xmlns:transaction="http://www.springframework.org/schema/tx"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.springframework.org/schema/beans"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
http://www.springframework.org/schema/data/jpa http://www.springframework.org/schema/data/jpa/spring-jpa-1.8.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">
<beans>
<bean id="entityManagerFactorData01" class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">
<property name="jpaProperties">
<map>
<entry key="hibernate.cache.use_second_level_cache" value="false"/>
<entry key="hibernate.id.new_generator_mappings" value="false"/>
<entry key="hibernate.transaction.jta.platform" value-ref="jtaPlatform"/>
</map>
</property>
<property name="jpaVendorAdapter" ref="jpaVendorAdapter"/>
<property name="jtaDataSource">
<bean class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="${database.driver}"/>
<property name="password" value="${database.data01.password}"/>
<property name="url" value="${database.data01.url}"/>
<property name="username" value="${database.data01.user}"/>
</bean>
</property>
<property name="packagesToScan" value="com.app.entites.data01"/>
</bean>
<bean id="entityManagerFactoryCpaudit"
class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">
<property name="jpaProperties">
<map>
<entry key="hibernate.cache.use_second_level_cache" value="false"/>
<entry key="hibernate.id.new_generator_mappings" value="false"/>
<entry key="hibernate.transaction.jta.platform" value-ref="jtaPlatform"/>
</map>
</property>
<property name="jpaVendorAdapter" ref="jpaVendorAdapter"/>
<property name="jtaDataSource">
<bean class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="${database.driver}"/>
<property name="password" value="${database.cpaudit.password}"/>
<property name="url" value="${database.cpaudit.url}"/>
<property name="username" value="${database.cpaudit.user}"/>
</bean>
</property>
<property name="packagesToScan" value="com.app.entites.cpaudit"/>
</bean>
<bean class="org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter" id="jpaVendorAdapter">
<property name="databasePlatform" value="org.hibernate.dialect.MySQLDialect"/>
</bean>
<context:annotation-config/>
<jpa:repositories base-package="com.app.repo.data01" entity-manager-factory-ref="entityManagerFactorData01"/>
<jpa:repositories base-package="com.app.repo.cpaudit" entity-manager-factory-ref="entityManagerFactoryCpaudit"/>
<!-- ************ JpaTransactionManager *********** -->
<!--
This will depend on your JBoss and Spring version and your application.
You will need to work this out.
Getting your transactionManager correct could be difficult.
See the following project for more ideas:
https://github.com/manish-in-java/spring-data-jta/blob/master/src/main/resources/springContext.xml
-->
<transaction:annotation-driven/>
<bean class="java.lang.String" id="jtaPlatform">
<constructor-arg value="org.hibernate.engine.transaction.jta.platform.internal.JBossStandAloneJtaPlatform"/>
</bean>
<bean class="org.springframework.transaction.jta.JtaTransactionManager" id="transactionManager">
<property name="transactionManager">
<bean class="com.arjuna.ats.internal.jta.transaction.arjunacore.TransactionManagerImple"/>
</property>
<property name="userTransaction">
<bean class="com.arjuna.ats.jta.UserTransaction" factory-method="userTransaction"/>
</property>
</bean>
<!-- ************ JpaTransactionManager *********** -->
</beans>
</beans>