Я хочу добавить некоторый блеск к элементу на веб-странице. Я бы предпочел, если мне не нужно добавлять дополнительные html на страницу. Я хочу, чтобы изображение появилось перед элементом, а не сзади. Какой лучший способ сделать это?
Есть ли передний план эквивалент фонового изображения в css?
Ответ 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