Css, чтобы сделать загрузочный navbar прозрачным

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

.navbar-inner {
    background-color:transparent;
}

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                    <div class="container">
                        <button type="button" 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>
                        </button>
                        <a class="brand" href="#">lol</a>
                        <div class="nav-collapse collapse">
                            <ul class="nav pull-right">
                                <li class="active"><a href="/">Home</a></li>
                                <li><a href="about">About</a></li>
                            </ul>
                        </div>
                    </div>
            </div>
        </div>

Ответы

Ответ 1

Мне удалось сделать панель навигации прозрачной, добавив новый .transparent класс в .navbar и установив CSS следующим образом:

 .navbar.transparent.navbar-inverse .navbar-inner {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}

Моя разметка похожа на эту

<div class="navbar transparent navbar-inverse">
            <div class="navbar-inner">....

Ответ 2

Просто добавьте это в свой css: -

.navbar-inner {
    background:transparent;
}

Ответ 3

То, что вы делаете, не нужно.

Для прозрачного фона просто выполните:

<div class="navbar">
// your navbar content
</div>

Ответ 4

Если вы используете последнюю версию Bootstrap и Ruby on Rails, вы можете просто ввести ее в файл html.erb так:

<nav class="navbar navbar-transparent">

И это все, что вам нужно.

Ответ 5

Нет необходимости в этом беспорядке.

Вы можете сделать навигационную панель прозрачной, не записывая navbar-default или navbar-inverse

<nav class="navbar">  //Don't add navbar-default to the class

  //

</nav>

Ответ 6

Код CSS:

.header .navbar-default {
  background: none;
}

Код HTML:

<header>
    <nav class="navbar navbar-default"></nav>
</header>

Ответ 7

Просто оставить по умолчанию навигатор, встроенный в bootstrap, отлично работает.
Вам просто нужно добавить пользовательский css ниже, таким образом все будет работать так, как должно.

HTML:

<nav class="navbar navbar-default">

CSS

.navbar-default {
    background-color: transparent;
}

Ответ 8

в бутстрапе 3.3.7 (и 4.0 предположительно), это работает:

вместо:

<nav class="navbar navbar-inverse navbar-fixed-top">

использовать:

<nav class="navbar bg-transparent navbar-fixed-top">

CSS не требуется!

Ответ 9

Обновление 2018 года

Бутстрап 4

По умолчанию Navbar прозрачен. Просто не забудьте использовать navbar-light или navbar-dark поэтому цвета ссылок работают против контраста цвета фона...

https://www.codeply.com/go/FTDyj4KZlQ

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Ответ 10

В дополнение к ответу Jochem Stoel... Я добавил "navbar-fixed-top" в класс тегов DIV, и он сработал.

Ответ 11

<nav class="navbar navbar-fixed-top navbar-light" style="background-color: transparent;">

<!--This should work just fine. it will make it transparent. hope i helped!-->

Ответ 12

Попробуйте это в своем коде, это сработало для меня -

предоставить идентификатор элементу, которому вы хотите сделать прозрачным

например, согласно вашему коду -

<div class="navbar-inner" id="nav1">

Затем примените это в своем css -

#nav1
{  
    background-color:#F00;  /*whichever you want*/
    opacity: 0.5;           /*0.5 determines transparency value*/ 
    filter:(opacity=50);       
}

Ответ 13

Протестируйте с помощью background-image: none. Это свойство удалит linear-gradient.

Вы можете увидеть результат здесь: http://jsfiddle.net/eugip9/8D36M/

Ответ 14

Если вы используете последнюю версию Bootstrap то есть 4.0.0 вам просто нужно использовать "прозрачное" ключевое слово как:

<nav class="navbar navbar-light transparent">

Просто не нужно применять какой-либо css для этого, поскольку bootstrap имеет это свойство.

Ответ 15

Для проекта Spring + Thymeleaf (boostrap) я обычно использую:

Внутри css следующий код

.navbar-inner {
        background:transparent;
    }

Внутри HTML строка

<nav class="navbar-inner">