css opacity stack order

Question

Я пытаюсь добавить белый div поверх изображения, а затем добавить непрозрачность к белому слою, чтобы я мог поместить текст поверх изображения.

HTML-:

<div id="red"> 
    <div id="white"> 
     <div id="blue"></div> 
    </div> 
</div> 

CSS-:

div { 
    width: 300px; 
    height: 300px 
} 
#red { 
    background: red; 
    position: relative; 
    z-index: -15; 
} 
#white { 
    background: white; 
    opacity: 0.5; 
    position: relative; 
    z-index: -10; 
} 
#blue { 
    background: blue; 
    width: 100px; 
    height: 100px; 
    opacity: 1; 
} 

http://jsfiddle.net/Nd2EZ/1/

Фон появляется розовый, который является большим. Но синий ящик я хочу появиться сверху, синим - но, к сожалению, он фиолетовый. По какой-то причине синяя коробка немного непрозрачна.

Как я могу сделать синюю рамку сверху, без какой-либо непрозрачности?

Answer 1

Прозрачность распространяется на все содержимое, включая детей. Представьте, что дети сначала отображаются, а затем имеют прозрачность, применяемую к этому визуализированному контенту. Если элемент не дочерний элемент - то есть в другой иерархии и расположен поверх - тогда на него не будет влиять непрозрачность родителя (предыдущего).

<div id="red"> 
    <div id="white"> 
    </div> 
</div> 
<div id="blue"></div> 

#blue { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    left: 0; 
    right: 0; 
} 

Answer 2

Ошибки, которые вы сделали, взяв их в качестве ребенка. Прозрачность воздействует на ребенка. Когда white непрозрачность 0.5, когда blue непрозрачность будет 0.5 даже до 1. More documentation is here.

See this answer, чтобы узнать больше.

Answer 3

переместить div # синий, чтобы быть дочерним элементом div # красного цвета, и установить положение стиля CSS в div # blue для абсолютного;

HTML

<div id="red"> 
    <div id="white"> 
    </div> 
    <div id="blue"></div> 
</div> 

CSS

div { 
    width: 300px; 
    height: 300px 
} 
#red { 
    background: red; 
    position: relative; 
    z-index: -15; 
} 
#white { 
    background: white; 
    opacity: 0.5; 
    position: relative; 
    z-index: -10; 
} 
#blue { 
    background: blue; 
    width: 100px; 
    height: 100px; 
    opacity: 1; 
    position:absolute; 
    left:0em; 
    top:0em; 
} 

Answer 4

Вместо использования opacity, вы можете использовать rgba (красный - зеленый - синий - Alpha), это поможет Вам желаемый эффект ..

#white { 
    background: rgba(255,255,255,.5); 
    position: relative; 
    z-index: -10; 
} 

Demo

BTW, вам действительно нужно z-index: - /?

Answer 5

Вы могли бы мог структурировать HTML, как это:

<div id="red"> 
    <div id="white"></div> 
    <div id="blue"></div> 
</div> 

и изменить CSS на:

div { 
    width: 300px; 
    height: 300px 
} 
#red { 
    background: red; 
    position: relative; 
} 
#white { 
    background: white; 
    opacity: 0.5; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#blue { 
    background: blue; 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 
}