Есть ли передний план, эквивалентный фоновому изображению в css?

Чтобы получить «изображение переднего плана» без дополнительного 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/.

Вы можете использовать этот css

#yourImage
{
z-index: 1; 
}

ПРИМЕЧАНИЕ

Установите индекс z-index больше, чем z-index элемента, поверх которого вы помещаете изображение.

Если вы не указали z-index, то 1 сделает всю работу.

Вы также можете установить z-index в -1, в этом случае изображение всегда будет в background!

Если вам нужен бело-прозрачный передний план

Это для будущих посетителей, таких как я, которые рассматривают возможность добавления бело-прозрачного переднего плана к элементу, чтобы, например, сообщить, что он скрыт/отключен. Вы часто можете достичь своей цели, просто понизив opacity ниже 1:

.is-hidden {
    opacity: 0.5;
}

visible
<span class="is-hidden">hidden</span>
visible

Изящное решение: box-sizing + padding-left, см. больше на css-трюки

Где-то в вашем HTML:

<img id="test_replacement" src="test.png" alt="test" />

CSS для замены изображения (при наведении)

#test_replacement {
    width: 200px; //must be the size of your image (and the replacement one)
    height: 200px; //idem
    display: block;
}
#test_replacement:hover {
    box-sizing: border-box;
    background-image: url('somewhere/other_image.png');
    padding-left: 200px; //at least the size of the width
}