z-индекс и проблемы непрозрачности

Я пытаюсь сделать обертку на задней стороне всех моих DIV, которая будет казаться прозрачной (непрозрачность: 0,6), но все перед ней тоже кажется прозрачным.

Есть идеи, как это исправить?

Пример можно найти здесь: http://testing.squaretise.com/ (я дал обертке (#wrap) красную рамку, чтобы вам было легче интерпретировать)

Спасибо,

Лиам

5 7
html css opacity z-index

5 ответов:

Использовать вместо: 

opacity: 0.6;

Это: 

background: rgba(255, 255, 255, 0.6);

Цвет находится в RGB, а последние цифры - для уровня прозрачности.

10

Вам нужно будет расположить свой прозрачный div абсолютно.

Http://www.w3.org/TR/css3-color/#transparency объясняет, как потомки улавливают прозрачность.

1

Непрозрачность передается по наследству. Если родитель видит насквозь, то и дети тоже.

Лучший способ сделать это-удалить opacity и установить прозрачный цвет фона: 

.foo {
  background: rgba(0,0,0,.5);
}
0

Вместо непрозрачности следует использовать прозрачный фон. Фоновое изображение-лучший способ, если вы хотите поддерживать IE8. (CSS3 цвета: http://caniuse.com/#search=rgba )

Используйте data-uri для повышения производительности.

0

Вы даже можете сделать это с opacity. Вот пример:

HTML 

<div id="wrapper"> 
    <div id="contentOrWhatever">
    </div>
</div>

CSS 

body {
    z-index:0;
}
#wrapper {
    z-index:1;
    opacity:0.6;
}
#contentOrWhatever {
    z-index:99;
    opacity:1;
}

Так что #wrapper Теперь прозрачен и всегда позади #contentOrWhatever. Надеюсь, я смогу вам помочь.

-1