Есть ли передний план эквивалент фонового изображения в css?

Я хочу добавить некоторый блеск к элементу на веб-странице. Я бы предпочел, если мне не нужно добавлять дополнительные html на страницу. Я хочу, чтобы изображение появилось перед элементом, а не сзади. Какой лучший способ сделать это?

ОТВЕТЫ

Ответ 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/.

Ответ 2

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

#yourImage
{
z-index: 1; 
}

Примечание

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

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

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

Ответ 3

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

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

.is-hidden {
    opacity: 0.5;
}
visible
<span class="is-hidden">hidden</span>
visible