Непрозрачный фон тела, проходящий через фиксированный заголовок

У меня есть фиксированный заголовок. Когда фон моего тела является сплошным цветом, все работает отлично - текст тела попадает под заголовком. Если я сделаю фон тела непрозрачным, тогда тело перейдет через заголовок, а не под ним. Панель навигации и логотип и т. Д. Входят в div «headContent».Непрозрачный фон тела, проходящий через фиксированный заголовок

<body> 
    <div id="headContent"> 
    </div> 
    <div id="content"> 
     <p>Content stuff.</p> 
    </div> 
    </div> 
</body>

Код заголовка находится в отдельном файле, поэтому у меня есть ссылка php на него. Таким образом, CSS для сНа, содержащего контента, который идет под заголовком:

#content{ 
    padding-top: 140px; 
    background-color: red; 
}

Но как только я добавляю непрозрачность содержание переходит в заголовке:

#content{ 
    padding-top: 140px; 
    background-color: red; 
    opacity: 0.4; 
}

кажется простым. Я пробовал использовать z-index. Есть идеи?

источник

2015-10-17 Mermaid

Пожалуйста размещаете полный пример кода. Кроме того, 'z-index' работает только с расположенными (то есть нестатическими) элементами. – j08691

['opacity' со значением, меньшим, чем' 1', создает новый контекст стекирования] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) - вот объяснение для вашей проблемы. И если заголовок уже исправлен, просто добавив в него 'z-index', он должен устранить проблему. – CBroe

Это решило мою проблему. – Mermaid

Привет, вы можете попробовать добавить следующие вместо непрозрачности в вашем CSS вы можете попробовать сделать это как этот

#content{ 
padding-top: 140px; 
background: rgba(255,0,0,0.5); 
}

источник

2015-10-17 21:09:55 RiaanV

Это решило мою проблему. – Mermaid

Рад, что я мог бы помочь проголосовать за голосование как полезный? – RiaanV

Непрозрачный фон тела, проходящий через фиксированный заголовок

ответ

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