Ответ 1
Чтобы достичь "основного изображения" без дополнительного HTML-кода, вы можете использовать псевдоэлемент (::before/:before) плюс CSS pointer-events. Последнее свойство необходимо, чтобы пользователь мог щелкнуть по слою "как если бы он не существовал".
Здесь пример (с использованием цвета, альфа-канал которого составляет 50%, так что вы можете видеть, что реальные элементы могут быть сфокусированы): http://jsfiddle.net/JxNdT/
<div id="cont">
Test<br>
<input type="text" placeholder="edit">
</div>
#cont {
width: 200px;
height: 200px;
border: 1px solid #aaa; /*To show the boundaries of the element*/
}
#cont:before {
position: absolute;
content: '';
background: rgba(0,0,0, 0.5); /*partially transparent image*/
width: 200px;
height: 200px;
pointer-events: none;
}
PS. Я выбрал псевдоэлемент ::before, потому что это естественно приводит к правильному позиционированию. Если я выбираю ::after, тогда я должен добавить position:relative; в действительный элемент (#cont) и top:0;left:0; к псевдоэлементу (::after).
ПФС. Чтобы получить эффект переднего плана для элементов без фиксированного размера, необходим дополнительный элемент. Для этого элемента оболочки требуются стили position:relative;display:inline-block;. Установите width и height псевдоэлемента в 100%, а псевдоэлемент будет растягиваться до ширины и высоты элемента обертки. Демо: http://jsfiddle.net/JxNdT/1/.