2

Есть

<div class="header">
<div class="logo">
</div>
</div>

это изображения, у header opacity 0.7 и z-index 1, а у logo не нужно вообще opacity и z-index 2, но все равно opacity накладывается и на logo. Как побороть?

2
  • демку сделайте
    – zb'
    Commented 15 окт. 2013 в 22:50
  • ну поставьте опасити на лого 1 Commented 15 окт. 2013 в 23:13

2 ответа 2

5

Нельзя просто так взять и отменить прозрачность.

Давайте посмотрим на страницу в целом, не вдаваясь в детали типа логотипа. Вот у вас есть отдельный кусок страницы - шапка. Вы делаете ее полупрозрачной. Это значит, что вы делаете ее вместе со всем ее содержимым полупрозрачным, чего бы там не было. Если бы внутри можно было сделать что-нибудь обратно непрозрачным, то изначальное действие потеряло бы смысл.

Возращаясь обратно к деталям обратите внимание на то, что значение по умолчанию для прозрачности это 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>
0

Можно использовать свободно псевдо-классы блоков для реализации данной задачи. Пример

<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>
4
  • Я практически тоже самое написал чуть выше :) Только псевдо-элемент не использовал. И вам не рекоменду без острой необходимости типа сделать html-код чистым или, скажем, если у вас вообще доступа к html нет. Сиди потом, ищи как тут в шапке фон сделан )
    – Cypher
    Commented 17 окт. 2013 в 3:22
  • Использование псевдо-элементов для стилизации вполне оправдывает себя. Они хорошо отображаются в инспекторе FF и Chrome. Так же они не входят в DOM, что снижает нагрузку. Ну и конечно же HTML чище с их использованием :)
    – Anon
    Commented 18 окт. 2013 в 8:56
  • >>Они хорошо отображаются в инспекторе FF и Chrome Это когда знаешь, что они там есть :)
    – Cypher
    Commented 19 окт. 2013 в 14:23
  • Я без проблем нахожу их. Если в стилях блока не видишь каких-либо свойств, но они применяются, то логично предположить, что не все так просто. Когда сам пишешь код, то ты в курсе всех фичей, а если ковырять что-то чужое, то там можно ногу сломать и без псевдо-элементов. В любом случае их использование лучше нагромождения лишнего HTML, который не несет в себе никакого контента
    – Anon
    Commented 21 окт. 2013 в 9:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.