Вопрос:
Моя цель состоит в том, чтобы иметь div с любым фоном, который затем использует псевдоэлемент для создания прозрачного белого наложения, таким образом, “осветляя” фон div. Однако “наложение” должно быть под содержимым div. Итак, в следующем примере:
<div class=»container»> <div class=»content»> <h1>Hello, World</h1> </div> </div> .container { background-color: red; width: 500px; height: 500px; position: relative; } .content { background-color: blue; width: 250px; } .container::before { content:»»; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; background-color: rgba(255, 255, 255, .8); }
.content div не должен быть “под” белым наложением, ака .container::before.
Я бы предпочел не использовать z-index в .content, но я могу, если это единственное решение.
Конечная цель: красный цвет должен быть покрыт, а текст и синий – нет.
JS скрипт: http://jsfiddle.net/1c5j9n4x/
Лучший ответ:
Если псевдоэлемент имеет z-index, вам нужно будет поместить элемент .content и добавить значение z-index в установить стекирование контекст.
.content { background-color: blue; width: 250px; position: relative; z-index: 1; }
.. вы также можете удалить z-index из псевдоэлемента, а затем просто поместить элемент .content. При этом ни один из элементов не нуждается в z-index. Причина этого в том, что псевдо-элемент :before является, по существу, предыдущим элементом брата. Таким образом, следующий элемент .content расположен сверху.
.content { background-color: blue; width: 250px; position: relative; } .container::before { content:»»; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .8); }
