Прозрачный цвет Bootstrap-3 Navbar

У меня возникла проблема с настройкой прозрачности прозрачности или цвета непрозрачности bootstrap3. Я ничего не изменил в bootstrap.css или bootstrap-theme.css В моем меню я пытаюсь поместить изображение под ним и установить цвет в черно-прозрачный или черный с непрозрачностью, как здесь: http://i.imgur.com/f9NNwtD.png Вы можете видеть, что количество непрозрачности не очень велико, но это так, и я должен сделать что-то подобное. Когда я что-то меняю, цвет меняет белый цвет, поэтому, пожалуйста, помогите мне.

Код ниже:

<div class="navbar transparent navbar-inverse navbar-static-top hr">
    <div class="navbar-brand logo"></div>
    <div class="navbar-brand-right">
    </div>
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav mineul" style="font-size:17px;margin-top:9px; color:white;">
              <li><a href="#">Test1</a></li>
               <li><a href="#">Test1</a></li>
               <li><a href="#">Test1</a></li>
            </ul>

        </div>
    </div>
</div>

И bootply: http://bootply.com/106966

Ответ 1

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

.navbar li { color: #000 }

http://bootply.com/106969

Ответ 2

вы можете использовать это для своего css, в основном используйте css3 rgba в качестве фона, чтобы контролировать непрозрачность и использовать задний фон для старого браузера, используя сплошной цвет или прозрачное изображение .png.

.navbar {
   background:rgba(0,0,0,0.5);   /* for latest browsers */
   background: #000;  /* fallback for older browsers */
}

Дополнительная информация: http://css-tricks.com/rgba-browser-support/

Ответ 3

Класс -.navbar-default. Вам нужно создать класс на вашем пользовательском css.navbar-default. И следуйте коду css. Кроме того, если вы не хотите использовать тень в своем меню, вы можете поместить тот же класс.

 .navbar-default {
      background-color:transparent !important;
      border-color:transparent;
      background-image:none;
      box-shadow:none;  
 }

Чтобы изменить шрифт navbar, класс изменится -.navbar-default.navbar-nav > li > a см. ниже код:

  .navbar-default .navbar-nav>li>a {
     font-size:20px; 
     color:#fff; 
 }

ref: http://twitterbootstrap.org/bootstrap-navbar-background-color-transparent/

Ответ 4

Перейдите к http://px64.net/
беспорядок с непрозрачностью, добавьте свое изображение или выберите цвет.
Скопировать либо html, либо css (css проще), сайт выплевывает.
Выберите свой элемент, а также навигационную панель.
.navbar { background-image: url (ссылка, которую предоставляет сайт); фон-повторить: повторять;
Наслаждайтесь.