проблемы с прозрачностью nav bar

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

Как фон развертывается:

Определение нав бар:

<nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
     <a class="navbar-brand" style="font-family: 'Oswald', sans-serif" href="#">SITE TITLE</a> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href=#>Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Gallery</a></li> 
      <li><a href="#">Events</a></li> 
      <li><a href="#">Purchase</a><li> 

      </div>

источник

2016-12-13 Ryan Turner

Великого. Итак, мы не можем отредактировать наши зависания после того, как мы отправим сообщение? –

Да, вы можете. В левом нижнем углу есть кнопка. – Device

Вы пытались использовать css 'opacity: 0.5;'? – nurdyguy

Нанести background-image к body, а не html, а затем использовать RGBA (http://www.w3schools.com/cssref/css_colors_legal.asp), чтобы создать полупрозрачный background-colour с помощью альфа-канал, вместо использования opacity. Вы можете сделать это в рамках медиа-запроса, чтобы он применялся только к устройствам меньшего размера.

Примечание: Применение непрозрачность вашей nav влияет на дочерние элементы тоже, таким образом, ваш ul, включая навигационный текст также станет прозрачным. Использование rgba влияет только на прозрачность фона выбранного класса.

Попробуйте это: https://jsfiddle.net/3mkajcus/1/

источник

2016-12-14 10:27:21

проблемы с прозрачностью nav bar

ответ

Смежные вопросы