透明導航欄

我使用的是導航欄背景色
我要刪除的背景顏色，並使其透明
我刪除了背景，施加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>

希望我們能夠找到一個解決方案。

來源

2017-08-18 PeterPilz

你的問題與導航欄是透明的有關嗎？標題'帶透明導航欄的問題'給人的印象是你的問題與bg顏色有關。 PLZ更新標題以適應您的問題。 –

當我運行這段代碼時，聯繫人，工作人員，關於和工作的鏈接都在屏幕右側，您希望他們留在正確的位置還是浮動到左側？ –

您沒有設置nav的絕對
位置您可以設置背景色爲黑色，所以它不會是transaper。
您需要設置z-index以確保其具有更高的z-index，以便用戶可以單擊菜單中的項目。

* { 
 
\t box-sizing: border-box; 
 
\t margin: 0; 
 
\t 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; 
 
      
 
     }

<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>

來源

2017-08-18 17:21:31 Dekel

您需要使用background-color: rgba()屬性的導航欄。 rgba()是一個函數，它需要4個參數，前三個是RED，GREEN和BLUE的顏色值，第四個參數是背景的透明度，它可以從0到1變化。因此，添加代碼後應該看起來像：

* { 
 
\t box-sizing: border-box; 
 
\t margin: 0; 
 
\t 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; 
 
      
 
     }

<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>

您可以在RGBA（）函數，只要你想改變第4個值，我將其設置爲0.8。

來源

2017-08-18 20:36:30

回答

相關問題