Question

我有以下问题：

我使用背景颜色的导航栏
我想删除背景颜色并使其透明
我删除了背景并将position:absolute应用于

信息：图像显示在position:absolute之后显示设计。在我应用更改以使其透明之前，附加的示例代码显示了原始设计。

问题：我将position:absolute应用于导航栏后，项目从右向左移动。

目标：只是为了明确目标：我想要透明背景的相同导航栏。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  clear: both;
}

.spalten-6 {
  width: 49.99992%;
}

.spalten-12 {
  width: 100%;
}

.spalten-6,
.spalten-12 {
  float: left;
}

.img-box img {
  width: 100%;
}

.img-box {
  border-left: 2px solid white;
  border-top: 2px solid white;
}

#video-container {
  position: relative;
  height: 300px
}

#video-container {
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

video#bgVid {
  position: absolute;
  z-index: -1;
  background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

video#bgVid.fillWidth {
  width: 100%;
  position: relative
}

nav {
  background-color: black;
  margin: 0;
  overflow: hidden;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style-type: none;
}

nav ul li a {
  color: white;
  background-color: black;
  display: block;
  line-height: 1em;
  padding: 1em 1.5em;
  text-decoration: none;
  letter-spacing: 0.15em;
  font-size: 13px;
}

nav ul li a.logo {
  background-color: black;
}

nav ul li a:hover {
  background-color: ;
}

li {
  float: right;
}

li:first-child {
  float: left;
}

nav ul li a img {
  width: 16px;
  height: 16px;
  float: right;
  margin-left: -20px;
}

.logo {
  font-size: 20px;
  letter-spacing: 0.1em;
}

.abstand-top {
  margin-top: 10px;
}


}
nav ul li a img {
  width: 16px;
  height: 16px;
  float: right;
  margin-left: -20px;
}
.logo {
  font-size: 20px;
  letter-spacing: 0.1em;
}
.abstand-top {
  margin-top: 10px;
}

<nav>
  <ul>
    <li><a href="http://google.com/" class="logo">BOOMYEAH</a></li>
    <li class="abstand-top">
      <a href="#"><img src="Images/icon-facebook.svg" alt=""></a>
    </li>
    <li class="abstand-top">
      <a href="#"><img src="Images/icon-instagram.svg" alt=""></a>
    </li>
    <li class="abstand-top"><a href="http://google.com/">WORK   &nbsp; &nbsp; &nbsp;  |</a></li>
    <li class="abstand-top"><a href="http://google.com/">ABOUT</a></li>
    <li class="abstand-top"><a href="http://google.com/">CREW</a></li>
    <li class="abstand-top"><a href="http://google.com/">CONTACT</a></li>
  </ul>
</nav>

<div id="video-container">
  <video id="bgVid" loop class="fillWidth" autoplay>
<source src=http://bigcom.com/assets/2014/08/iChooseB.mp4 type=video/mp4>
</video>
</div>

希望我们能找到解决方案。

Answer 1

您没有将nav的位置设置为绝对
您将背景颜色设置为黑色，因此不会转发。
您需要设置z-index以确保其z-index更高，以便用户点击菜单中的项目。

＆＃13;

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
        
        .row {
            clear: both;
        }
        
        .spalten-6 {
            width: 49.99992%;
        }

        .spalten-12 {
            width: 100%;
        }
        
        .spalten-6,  .spalten-12 
        { float:left;} 
   
        .img-box img {
            width: 100%;
        }
        
        .img-box {
            border-left: 2px solid white;
            border-top: 2px solid white;
        }
        

#video-container {
    position: relative;
    height:300px
}
#video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;

}
video#bgVid {
    position:absolute;
    z-index:-1;
    background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}
video#bgVid.fillWidth {
    width: 100%;
   position:relative
}

nav {
    margin: 0;
    overflow: hidden;
    position: absolute;
    z-index: 10;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style-type: none;
}

nav ul li a {
    color: white;
    display: block;
    line-height: 1em;
    padding: 1em 1.5em;
    text-decoration: none;
    letter-spacing: 0.15em;
    font-size: 13px;
}

nav ul li a.logo {
    background-color: black;
}

nav ul li a:hover {
    background-color: ;
}

li {
    float: right;
}

li:first-child {
    float: left;
}
        
       nav ul li a img {
           width: 16px;
           height: 16px;
           float: right;
           margin-left: -20px;
}

        .logo {
            font-size: 20px;
            letter-spacing: 0.1em;
        }
        
        .abstand-top {
            margin-top: 10px;
            
        }

    
        }
        
      
       nav ul li a img {
           width: 16px;
           height: 16px;
           float: right;
           margin-left: -20px;
}

        .logo {
            font-size: 20px;
            letter-spacing: 0.1em;
        }
        
        .abstand-top {
            margin-top: 10px;
            
        }

＆＃13;

<nav>
    <ul>
        <li><a href="http://google.com/" class="logo">BOOMYEAH</a></li>
        <li class="abstand-top"><a href="#"><img src="Images/icon-facebook.svg" alt=""></a></li>
        <li class="abstand-top"><a href="#"><img src="Images/icon-instagram.svg" alt=""></a></li> 
        <li class="abstand-top"><a href="http://google.com/">WORK   &nbsp; &nbsp; &nbsp;  |</a></li>
        <li class="abstand-top"><a href="http://google.com/">ABOUT</a></li>
        <li class="abstand-top"><a href="http://google.com/">CREW</a></li>
        <li class="abstand-top"><a href="http://google.com/">CONTACT</a></li>
       
    </ul>
</nav>


<div id="video-container">
<video id="bgVid" loop class="fillWidth" autoplay>
<source src=http://bigcom.com/assets/2014/08/iChooseB.mp4 type=video/mp4>
</video> 
</div>

＆＃13;

Answer 2

您需要使用导航栏的$("input[name=testradiochange]:radio").change(function () { alert('radio selected'); } $("input[name=acknowledge]:checkbox").change(function () { alert('checkbox selected'); }属性。 background-color: rgba()是一个带4个参数的函数，前三个是RED，GREEN和BLUE的颜色值，第四个参数是背景的透明度，可以从0到1变化。所以，添加之后你的代码应如下所示：

rgba()

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
        
        .row {
            clear: both;
        }
        
        .spalten-6 {
            width: 49.99992%;
        }

        .spalten-12 {
            width: 100%;
        }
        
        .spalten-6,  .spalten-12 
        { float:left;} 
   
        .img-box img {
            width: 100%;
        }
        
        .img-box {
            border-left: 2px solid white;
            border-top: 2px solid white;
        }
        

#video-container {
    position: relative;
    height:300px
}
#video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;

}
video#bgVid {
    position:absolute;
    z-index:-1;
    background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}
video#bgVid.fillWidth {
    width: 100%;
   position:relative
}

nav {
    margin: 0;
    overflow: hidden;
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    z-index: 10;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style-type: none;
}

nav ul li a {
    color: white;
    display: block;
    line-height: 1em;
    padding: 1em 1.5em;
    text-decoration: none;
    letter-spacing: 0.15em;
    font-size: 13px;
}

nav ul li a.logo {
    background-color: black;
}

nav ul li a:hover {
    background-color: ;
}

li {
    float: right;
}

li:first-child {
    float: left;
}
        
       nav ul li a img {
           width: 16px;
           height: 16px;
           float: right;
           margin-left: -20px;
}

        .logo {
            font-size: 20px;
            letter-spacing: 0.1em;
        }
        
        .abstand-top {
            margin-top: 10px;
            
        }

    
        }
        
      
       nav ul li a img {
           width: 16px;
           height: 16px;
           float: right;
           margin-left: -20px;
}

        .logo {
            font-size: 20px;
            letter-spacing: 0.1em;
        }
        
        .abstand-top {
            margin-top: 10px;
            
        }

您可以根据需要更改rgba（）函数中的第4个值，我将其设置为0.8。

透明导航栏

2 个答案: