Есть
<div class="header">
<div class="logo">
</div>
</div>
это изображения, у header opacity 0.7 и z-index 1, а у logo не нужно вообще opacity и z-index 2, но все равно opacity накладывается и на logo. Как побороть?
Есть
<div class="header">
<div class="logo">
</div>
</div>
это изображения, у header opacity 0.7 и z-index 1, а у logo не нужно вообще opacity и z-index 2, но все равно opacity накладывается и на logo. Как побороть?
Нельзя просто так взять и отменить прозрачность.
Давайте посмотрим на страницу в целом, не вдаваясь в детали типа логотипа. Вот у вас есть отдельный кусок страницы - шапка. Вы делаете ее полупрозрачной. Это значит, что вы делаете ее вместе со всем ее содержимым полупрозрачным, чего бы там не было. Если бы внутри можно было сделать что-нибудь обратно непрозрачным, то изначальное действие потеряло бы смысл.
Возращаясь обратно к деталям обратите внимание на то, что значение по умолчанию для прозрачности это 1. Выставляй не выставляй логотипу прозрачность 1, она все-равно будет свой честной единицей.
Возможно вам поможет полупрозрачный фон rgba(255,124,124, .7); или создать отдельный слой для того, что вы хотите сделать полупрозрачным, например:
<style>
.background {
background: url(pattern.jpg);
opacity: .7;
}
</style>
<div class="header">
<div class="background"></div>
<div class="logo"></div>
<div class="contacts"></div>
...
</div>
Можно использовать свободно псевдо-классы блоков для реализации данной задачи. Пример
<pre>#header:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0.7;
z-index:-1;
background:url(../images/sprite.png) -482px 0;
}</pre>
z-index
положит before
под остальные элементы в хедере. Если используется на картинка, а цвет, то можно свободно использовать rgba
-цвета с каналом прозрачности
<pre>background-color: rgba(255, 255, 255, .7);</pre>