наложение в HTML исправить

Question

Как вы можете видеть здесь:

http://clients.noxxie.nl/rashosting/

Я использую оверлей на изображении светлее черного фона. но текст также наложен, и этого не произойдет.

Кто-нибудь теперь как это исправить?

Answer 1

Ваш контейнер .text имеет значение opacity, равное 0,5, и наследуется своим содержимым. Вы можете исправить это, используя rgba цвет на контейнере вместо непрозрачности (хотя в IE есть разреженная поддержка (IE9 и выше, я полагаю) следующим образом:

.text {
background-color: rgba(0, 0, 0, 0.5);
}

Или вы можете использовать полупрозрачное изображение png 1x1 в качестве фона для этого контейнера. Другим способом было бы создать оверлейный элемент div, абсолютно позиционируемый для покрытия контейнера .text с непрозрачностью и достаточно низким z-index, чтобы оставаться позади всего остального. Примерно так:

HTML

<div class="overlay">&nbsp;</div>

Вы можете поместить .overlay div внутри вашего контейнера .text прямо в нижней части div.

CSS

.text {
  position:relative;
  z-index:10;
}

.overlay {
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  background-color:black;
  opacity:0.5
  z-index:1;
}