Как разместить background поверх тега img.

В этой статье описано, как разместить фоновое изображение над изображением заключенное в тег img. Это даже звучит странно, ведь свойство background предназначено, для отображения на фоне всего остального. Такова логика этих вещей и z-index, разумеется, здесь не работает.

Но, в случае когда возникает потребность пренебречь этой логикой и заставить фон выполнять функции изображения сверху — будет использован псевдоэлемент after к которому устанавливается свойство background.

Этим примером я не претендую на оригинальность — просто один из возможных вариантов решения данного вопроса.

Пример основан на изображении выступающего в роли привью к видео и YouTube значком проигрывания. Значок взят здесь https://www.youtube.com/yt/brand/downloads.html. А в качестве изображения использована реальная привьюшка от видео на ТыТруба.

И так, код


<a class="front-yt-icon" title="Pug Life - Simon's Cat" href="#">
  <img src="https://i.ytimg.com/vi/fcoNym1Q1Ds/hqdefault.jpg" width="626" height="352" alt="Simon's Cat - Pug Life" />
</a>

и краткое пояснение его css части.


.front-yt-icon{
display: block;
position: relative;
max-width: 480px;
max-height: 360px;
}

.front-yt-icon::after{
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
background-image: url(../images/yt-icon-dark.png);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center;
}

.front-yt-icon:hover::after{
background-image: url(../images/yt-icon-red.png);
}

В описанном примере для правила front-yt-icon имеет значение как позиционирование, так и блочное отображение. Высота и ширина заданна только для того, чтоб определить в каких рамках должен отображаться элемент.

Для его псевдо-элемента, так же важно позиционирование, но уже абсолютное и нулевое расстояние от границ. И конечно работает центрирование бекграунда. Hover добавлен сугубо для правдоподобия.

Записи с такими же тегами:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *