Какие есть способы решения связанные с особенностью работы z-index и opacity?

Question

[Иван Стеценко]

Здравствуйте , столкнулся с проблемой при верстке: есть блок с фоном , на него накладываются еще 2 блока с узором и прозрачностью. Сверху должен быть белый текст, но так как z-index нестандартно работает с opacity <1 цвет текста искажается.

HTML

<div class="banner">
		<div class="pixel1">
			<div class="pixel2">
				<div class="text">
					<p>We are specialist in</p>
					<p>Responsive designs, Stationary</p>
					<p>And wordpress Themes</p>
				</div>
			</div>
		</div>
	</div>

CSS

.banner{
	height: 585px;
	width: 100%;
	background-image: url(../images/Layer1.png);
	text-align: center;
	margin: 0px;
	padding: 0px;
	position: relative;
	z-index: -1;
}
.text{
	color: #fff;
}
.pixel1{
	height: 100%;
	background-image: url(../images/pattern1.png);
	background-repeat: repeat;
	background-color: #0445a7;
	opacity: 0.6;

}
.pixel2{
	height: 100%;
	background-image: url(../images/pattern2.png);
	background-color: #023193;
	background-repeat: repeat;
	opacity: 0.502;

}
.banner .pixel1{
	background-blend-mode: multiply;

Подскажите как решить данную проблему.

Скрин

UPD:
у меня есть узор у которого тоже должна быть прозрачность, как оказалось вся проблема из за прозрачности узора и при его наложении с заданными ему свойствами текст как и ранее искажается

Comments

[Abdula Magomedov]

Дайте ссылку на песочницу. jsfiddle.net

[Сергей delphinpro]

Z-index работает. Но видимо не так, как вы ожидаете.
Вообще это фича такая. Удобно использовать в определённых случаях.

[Иван Стеценко]

Сергей, Вы абсолютно правы , я по своей невнимательности ошибся , z-index работает

Answer 1

[Святослав]

Указывай цвет бэкграуда используя

background: rgba( 'здесь цвет в формате rgb' , 0.5)

Это будет только на него действовать и не затрагивать другие блоки.

Comments

[Иван Стеценко]

Спасибо, остался еще один вопрос, у меня есть узор у которого тоже должна быть прозрачность, как оказалось вся проблема из за прозрачности узора и при его наложении с заданными ему свойствами текст как и ранее искажается

Answer 2

[Илья Герасимов]

z-index работает, просто текст находится под полупрозрачными слоями потому и прозрачный, в твоем случае нужно вынести тексты выше этих слоев.