Отзывчивое меню с текстом на фоновом изображении

У меня есть отзывчивое меню поверх фона изображения, в котором также есть текст сверху.Отзывчивое меню с текстом на фоновом изображении

Потому что я должен установить текст messaqge с «position: absolute», чтобы сделать его наложением поверх фонового изображения, когда я расширяю меню, пункты меню будут накладываться на текстовое сообщение. Как это исправить?

Другая проблема: я хотел бы, чтобы меню было прозрачным на фоновом изображении, а не на темно-сером фоне. Однако я не могу найти способ сделать это.

Here's the code

источник

2016-05-12 notlkk

Возможно, вы захотите рассмотреть сообщение заголовка, чтобы поместить его в свой заголовок-слайды div, а затем поместите этот div в относительный. Таким образом, ваше сообщение заголовка фактически позиционируется абсолютно в заголовке, а не в теле. Затем, если вы хотите, чтобы ваш навигатор был прозрачным над изображением заголовка, вы можете позиционировать свое тело относительно относительного только для того, чтобы быть в безопасности, и позиционировать ваше навигационное устройство на абсолютное, дать ему высокий z-индекс, а непрозрачность фона может быть достигнута с использованием цветов rgba. Так что-то вроде следующего:

Вот скрипку демо Fiddle Demo

Заголовок:

.header-slides { 
    height: 500px; 
    border: 1px solid black; 
    position:relative; 
} 

<div class="header-slides" data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]'> 
    <h2>Header Message</h2> 
</div>

Тогда ваш навигационный:

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: rgba(20,20,20,0.8); 
    min-height: 30px; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    z-index:5; 
}

И затем удалить ПОлОжЕНИЕ относительно в адаптивном css при максимальной ширине 680 пикселей от вашего навигатора, так что полностью удалите следующее:

ul.topnav.responsive {position: relative;}

источник

2016-05-12 01:06:00

Это тоже очень хорошее решение. Единственное, что меня беспокоит, это то, что если количество элементов моего меню больше, они в конечном итоге накладывают большую часть фонового изображения. Я бы предпочел нажимать фоновое изображение, чтобы оно не накладывалось на меню. Так что кажется, что я просто помещаю сообщение внутри заголовка header-slides div и позиционирую div в относительное. Я могу нажать фоновое изображение. Я посмотрю ваше решение более внимательно, чтобы сделать навигационный фон прозрачным. Благодарю. – notlkk

Единственная проблема с нажатием на контент с прозрачным фоном заключается в том, что вы не увидите ничего за прозрачным навигатором, кроме белого, если это имеет смысл. Таким образом, он только сделает ваш цвет фона для вашего браузера более легким, но он по-прежнему будет выглядеть сплошным цветом. Пример скрипта https://jsfiddle.net/wamosjk/m8k0t5f0/ –

Вы абсолютно правы. Я понял, что как только я начну возиться с цветом. Я думаю, я собираюсь остаться с темно-серым фоном и сбрасывать фоновое изображение. Спасибо за помощь. – notlkk

z-index, Брух.

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

.topnav{z-index:9999999}

try it.

Для прозрачных цветов BG вы можете использовать rgba(). Есть online tools, чтобы конвертировать ваши цвета в любое место.

источник

2016-05-12 00:47:23

Я не знаю почему, но я думаю, что меня смутило текстовое сообщение сверху, поэтому я думал, что индекс z не работает. Но вы правы, это так же просто, как использование z-индекса. duh ..... Как насчет фона верхнего nav? Есть ли простой способ превратить это в прозрачный фон вместо темно-серого? – notlkk

yessir, см. Редактирование. –

Отзывчивое меню с текстом на фоновом изображении

ответ

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