Как сделать полупрозрачное наложение цвета?

Question

[Гриша Никольский]

Привет. Появилась надобность в создании наложения цвета на background-image прямо в вебе. Дело решается на раз-два при помощи RGBa, но, к сожалению, этот способ мне никак не подходит. Немного подробнее:
Имеется картинка-бекграунд(.main-head) с большим количеством элементов на ней(.elements). Нужно сделать полупрозрачное наложение цвета БЕЗ использования RGBa, а лишь opacity и background-color. Все мои попытки оканчивались тем, что вместе с картинкой полупрозрачными становились и элементы поверх нее. Как можно решить эту проблему? Заранее спасибо.

Answer 1

[Danila]

codepen.io/DNLHC/pen/dMwWbq
хотя лучше это делать через rgba

Answer 2

[Андрей Федоров]

Если я правильно понял задачу...

<div class="main-head">
  <div class="main-head-over">
  </div>
</div>

.main-head {
  position: relative;
  width: 800px;
  height: 600px;
}
.main-head-over {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 600px;
  background-color: #000;
  opacity: .4;
}

Comments

[Гриша Никольский]

Внутри .main-head находится еще множество элементов и при подобном коде они тоже становятся полупрозрачными, чего мне не хочется. Мне нужно лишь полупрозрачное наложение на картинку.

[Андрей Федоров]

Гриша Никольский: Внутренние элементы нужно размещать в блоке main-head, но не main-head-over.

Answer 3

[Alexander Haztar]

Надеюсь я правильно понял, что имеется в виду.
codepen.io/neqin/pen/ONrzaG

<div class="bg">
  <h1>Text</h1>
</div>

.bg{
 background:url(http://i.imgur.com/jo5Flh3.jpg) no-repeat;
  width:400px;
  height:400px;
  position:relative;
}
.bg:after{
  background:#333;
  content:' ';
  top:0;
  bottom:0;
  left:0;
  right:0;
  position:absolute;
  z-index:0;
  opacity:0.7;
}
.bg *{
  z-index:1;
  position:relative;
  color:#fff;
}