Вопрос:
Я новичок в бутстрапе.
Это дизайн, который я пытаюсь сделать:
Как вы можете видеть, навигационная панель находится поверх фонового изображения.
Это то, что у меня есть:
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css»> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js»></script> <script src=»http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js»></script> <style> <style> .navbar-default { background: none; border: none; } body{ height:100%; } html{ background: url(‘sun.jpg’) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position: 0 0; } </style> </head> <body> <nav class=»navbar navbar-default»> <div class=»container»> <ul class=»nav navbar-nav»> <li class=»active»><a href=»#»>home</a></li> <li><a href=»#»>ask a question!</a></li> <li><a href=»#»>learn</a></li> <li><a href=»#»>contact</a></li> </ul> </div> </nav> </body> </html>
дает:
Я не знаю, как поместить его на изображение, а не выше.
short sidequestion: что делает изображение того, что изображение из vimeo делает его намного лучше, чем изображение, которое я использую от солнца? на моем изображении вы можете видеть все пиксели и т.д. Это связано с тем, что это может быть слишком маленькое изображение и что его нужно растягивать, чтобы соответствовать всей странице?
EDIT:
это то, что я пробовал, но не работал
<nav class=»navbar navbar-default»> <div class=»container»> <ul class=»nav navbar-nav»> <li class=»active»><a href=»#»>home</a></li> <li><a href=»#»>ask a question!</a></li> <li><a href=»learn.html»>learn</a></li> <li><a href=»#»>contact</a></li> </ul> <style> .navbar{ background:transparent; } </style> </div> </nav> Лучший ответ:
Bootstrap 4
Навигатор не имеет цвета фона, поэтому он по умолчанию прозрачен. Не забудьте использовать navbar-light или navbar-dark, чтобы цвета ссылок работали с контрастностью фонового изображения. Дисплей toggler также основан на navbar – (темном или светлом).
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>
Bootstrap 3
Используйте navbar-fixed-top, а затем измените CSS, чтобы сделать его прозрачным. Вот пример пользовательского прозрачного навигатора.
http://www.codeply.com/go/JNy8BtYSem
<nav id=»nav» class=»navbar navbar-fixed-top» data-spy=»affix»> <div class=»container»> <div class=»navbar-header»> <a href=»#» class=»navbar-brand»>Brand</a> <a class=»navbar-toggle» data-toggle=»collapse» data-target=».navbar-collapse»> <i class=»fa fa-bars»></i> </a> </div> <div class=»navbar-collapse collapse»> <ul class=»nav navbar-nav»> <li><a href=»#»>Link</a></li> <li><a href=»#»>Link</a></li> </ul> <ul class=»nav pull-right navbar-nav»> <li> <a href=»#»>Link</a> </li> </ul> </div> </div> </nav> Ответ №1
Вам нужно удалить фон с панели навигации:
.navbar-default { background: none; } <link href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css» rel=»stylesheet»/> <style> html, body { height: 100%; background: red; } .navbar-default { background: none; border: none; } </style> <!— Wrap all page content here —> <div id=»wrap»> <!— Fixed navbar —> <div class=»navbar navbar-default navbar-fixed-top»> <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> <a class=»navbar-brand» href=»#»>Project name</a> </div> <div class=»collapse navbar-collapse»> <ul class=»nav navbar-nav»> <li class=»active»><a href=»#»>Home</a></li> <li><a href=»#about»>About</a></li> <li><a href=»#contact»>Contact</a></li> <li class=»dropdown»> <a href=»#» class=»dropdown-toggle» data-toggle=»dropdown»>Dropdown <b class=»caret»></b></a> <ul class=»dropdown-menu»> <li><a href=»#»>Action</a></li> <li><a href=»#»>Another action</a></li> <li><a href=»#»>Something else here</a></li> <li class=»divider»></li> <li class=»dropdown-header»>Nav header</li> <li><a href=»#»>Separated link</a></li> <li><a href=»#»>One more separated link</a></li> </ul> </li> </ul> </div><!—/.nav-collapse —> </div> </div> </div>Ответ №2.navbar{ background:transparent; }
Это сделает ваш фон прозрачным.
Ответ №3
Просто возьмите обратное изображение в Body, а затем используйте этот код
<div class=»navbar navbar-inverse navbar-fixed-top»> <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> <a class=»navbar-brand» href=»#»>Brand</a> </div> <div class=»collapse navbar-collapse»> <ul class=»nav navbar-nav»> <li class=»active»><a href=»#»>Home</a></li> <li><a href=»#about»>About</a></li> </ul> <ul class=»nav navbar-nav navbar-right»> <li><a href=»#»>Username</a></li> </ul> </div> </div> </div> <div class=»wide»> <div class=»col-xs-5 line»><hr></div> <div class=»col-xs-2 logo»>Logo</div> <div class=»col-xs-5 line»><hr></div> </div> <div class=»container»> <div class=»text-center»> <h1>Content</h1> </div> </div>
Также используется стиль стиля = “opacity: 0.6;” в Navbar div
Ответ №4
Цвет фона задается в классе .navbar-default, поэтому убедитесь, что ваш css использует этот класс, чтобы настроить прозрачность панели. например
.navbar-default{background-color: transparent;}
Как говорит Репина, это нужно применять после стилей начальной загрузки в <head>
Если вы действительно хотите заставить его, пока вы его используете, добавьте следующий атрибут к элементу <nav>
style=»background-color: transparent;»
Итак, ваш элемент nav выглядит так:
<nav class=»navbar navbar-default» style=»background-color: transparent;»>
Однако, очевидно, лучше иметь это в файле CSS, а не как встроенный HTML
