在不影響按鈕的情況下更改引導程序的導航欄不透明度

我只希望我的導航欄按鈕可見，而跨越整個頁面的實際欄具有完全不透明度。每當我更改導航欄的不透明度時，它都會影響其內部的類，即使我指定這些類不具有不透明度。在不影響按鈕的情況下更改引導程序的導航欄不透明度

我已經發布了我想要複製的圖像。正如您所看到的，鏈接完整顯示，但導航欄不可見，允許顯示完整的背景圖像。它可能看起來像一個堅實的紅色欄，但我向你保證這是一個隱形的導航欄。

enter image description here

任何幫助將是非常感謝！謝謝。

這裏是我的導航欄HTML代碼：

<div class="custom_nav"> 
    <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </a> 
       <a class="brand" href="index.html">Homegrown</a> 
      <div class="nav-collapse"> 
       <ul class="nav nav-pills"> 
        <li class="active"><a href="index.html">Home</a></li> 
        <li><a href="index.html">About</a></li> 
        <li><a href="index.html">Contact</a></li> 
       </ul><!-- /.nav --> 
      </div><!--/.nav-collapse --> 
      </div><!-- /.container --> 
     </div><!-- /.navbar-inner --> 
    </div><!-- /.navbar --> 
</div><!--/.custom_nav-->

到目前爲止，我已經試過編輯我的CSS下列要求：

ul .nav .nav-pills {background:rgba(255,255,255,0.5)} 

.custom_nav { 
    .navbar.navbar-fixed-top { 
     background:rgba(255,255,255,.5); 
    } 
    .navbar .nav > .active a, .navbar .nav > .active a:hover, .navbar .nav > li a:hover { 
     background:rgba(210,105,30, 0); text-shadow:none; 
    } 
}

來源

2013-01-24 Brian

你的問題不是很清楚。你是問如何改變父母的不透明度而不影響孩子的不透明度？如果這是你要做的，你可以使用rgba作爲背景顏色（而不是不透明度）。我會建議張貼演示你的問題的小提琴。 – zakangelle

不透明屬性傳播給其子女。解決這個問題的一種方法是使用http://www.impressivewebs.com/demo-files/css-opacity/ –

@ZakAngelle中介紹的機制我試圖做下面的評論中的鏈接描述，但導航欄是父級，按鈕是兒童級。 – Brian

一種解決方案是使用rbga給出here。 It does not work in ie < 9，

.custom_nav .navbar.navbar-fixed-top .navbar-inner{ 
    background: rgba(255, 255, 255, 0.3); 
}

Fiddle

來源

2013-01-24 03:49:34

我對我的帖子做了一些修改，以顯示我是如何設置的以及我累了什麼。 – Brian

@Brian解決方案更新 –

要改變家長的不透明度不影響孩子們的不透明度，對背景屬性使用rgba，像這樣：

ul { 
    background: rgba(255, 255, 255, 0.7); 
}

第3個值是組成顏色的RGB值，最後一個值是顏色的不透明度（在上例中，不透明度爲70％）。

請參閱DEMO。

來源

2013-01-24 03:50:00 zakangelle

我對我的帖子做了一些編輯，以顯示我如何設置以及我嘗試了什麼。 – Brian

我不得不寫一個mixin與stylu：

support-for-ie ?= true 

opacity(n) 
    opacity n 
    -moz-opacity n 
    filter unquote('alpha(opacity=' + round(n * 100) + ')') 
    if support-for-ie 
    filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')') 

.opacity-70 
    opacity(0.7)

我希望它可以幫助別人誰想要支持一些不透明度，幾乎所有的瀏覽器認爲

來源

2014-08-18 02:14:19 jiahut

在不影響按鈕的情況下更改引導程序的導航欄不透明度

回答

相關問題