右側的菜單和左側的半透明導航欄上的Logo

我需要一個在背景圖像上半透明的導航欄。右側的菜單和左側的半透明導航欄上的Logo

標誌在左側菜單右側應列表items.Something之間等距像 -

https://getbootstrap.com/examples/cover/

http://bootsnipp.com/snippets/featured/full-screen-background-cover-page

我試着給float:right到我的菜單列表的<ul>元它走向了極端。

HTML

<body> 
    <nav> 
    <ul style="float:right;"> 
     <li style="display:inline;"><a href= "#">item1</a></li> 
     <li style="display:inline;"><a href= "#">item2</a></li> 
     <li style="display:inline;"><a href= "#">item3</a></li> 
     <li style="display:inline;"><a href= "#">item4</a></li> 
    </ul> 
</nav> 
</body>

CSS

body { 
background-image:url("giphy.gif"); 
background-repeat: no-repeat; 
background-size: cover; 
overflow-x:hidden; 
} 

nav { 
    height:60px; 
    width:100%; 
    overflow-y:hidden; 
    overflow-x:hidden; 
    z-index:1; 
    background-color: transparent; 
}

來源

2016-05-14 kaarthick raman

使徽標成爲一個帶有bg圖像的元素，而不是將其放在body元素上，這樣可以更輕鬆地使用css在頁面上移動元素。 – fauverism

http://jsbin.com/ruwopuyavu/edit?html,css,output – fauverism

使用引導CSS，你可以做到這一點作爲

<body> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#">Your LOGO here.</a> 
     </div> 
     <ul class="nav navbar-nav" style="float:right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Page 1</a></li> 
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
     </ul> 
     </div> 
    </nav> 
</body>

希望這有助於！

來源

2016-05-14 03:50:16

右側的菜單和左側的半透明導航欄上的Logo

回答

相關問題