Проблема с прозрачностью при абсолютно позиционированных элементах

Вопрос-ответ HTML/CSS
1

http://jsfiddle.net/nwz46gap/
Собственно почему появляется прозрачнось блока .outer? Если он непрозрачный и z-index больше чем у .back. как такое решить и оставив position absolute для .back и .outer.

2

Свойство прозрачности наследуется детьми в стиле “все содержимое блока со свойством opacity будет иметь прозрачность” без возможности перекрыть. Получается прозрачность от .back влияет на все вложенные элементы.

Чтобы иметь прозрачный фон, и непрозрачных детей надо применять хитрые техники.

  1. Можно использовать background-color: rgba(...) (не поддерживается старыми браузерами)
  2. Можно использовать отдельный блок, который имеет opacity, а все, что должно быть без opacity складывается рядом с блоком. Тут вопрос в том как корректно спозиционировать этот прозрачный блок. Помогает комбинация
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

которая расстягивает блок с opacity на размеры его родителя.
3. Полупрозрачная png-шка. (очень не рекоменую).

1 лайк
3

Я понял, совсем простого пути нет. Спасибо. Лучше всего второй вариант. Я так понял из .back нужно убрать все элементы.

1 лайк