Изменение прозрачности навигационной панели Bootstrap без изменения кнопок

Я только хочу, чтобы мои кнопки navbar были видны, в то время как фактическая панель, которая охватывает всю страницу, имеет полную непрозрачность. Всякий раз, когда я изменяю непрозрачность панели навигации, это влияет на классы внутри нее, даже если я указываю, что эти классы не имеют непрозрачности.

Я опубликовал изображение того, что я пытаюсь воспроизвести. Как вы можете видеть, ссылки отображаются полностью, но навигационная панель невидима, позволяя отображать полное фоновое изображение. Это может выглядеть как сплошная красная полоса, но я уверяю вас, это невидимый навбар.

Введите описание изображения здесь

Любая помощь будет очень признательна! Спасибо.

Вот мой HTML-код navbar: 

<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;
    }   
}
3 4
html css twitter-bootstrap opacity navbar

3 ответа:

Одним из решений является использование rbga в качестве заданного здесь. он не работает в ie , 

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

Скрипка

15

Чтобы изменить непрозрачность родительского элемента, не затрагивая непрозрачность дочерних элементов, используйте rgba в свойстве background, например: 

ul {
  background: rgba(255, 255, 255, 0.7);
}
Первые 3 значения-это значения RGB, составляющие цвет, а последнее значение-это непрозрачность цвета (в приведенном выше примере непрозрачность равна 70%).

Смотритедемо .

1

Я должен был написать миксин со Стилу: 

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)

Я надеюсь, что это может помочь тем, кто хочет некоторую непрозрачность с поддержкой почти всех браузеров думает

0