Как сделать картинку поверх фона в css

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

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

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

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

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

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

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

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

Наложение фона на картинку с помощью CSS

Как наложить фон на картинку с помощью CSS? Часто на главной странице сайта или ленинг-пейдж размещают картинку на всю ширину и высоту экрана, а сверху добавляют затемняющий фон, поверх которого в дальнейшем располагается заголовок. Давайте добавим не обычный заголовок, а поздравление с наступающим Новым 2019 годом! 🙂

Далее в примере я использую картинки с сайта http://lorempixel.com/, чтобы вы могли посмотреть результат в песочнице. Картинки генерируются автоматически, поэтому при каждом изменении кода, будет показываться новая картинка.

Добавим в html-файл следующий код:

Самое важное, что нужно здесь понимать — позиционирование элементов относительно друг друга.

Как реализовать перекрытие изображений в CSS

Как реализовать перекрытие изображений в CSS

От автора: очень популярная в веб-дизайне в настоящее время вещь — это перекрывающиеся изображения. Когда вам, как разработчику, передается проект, есть несколько способов реализовать это — как и почти всегда в CSS.

Один из способов, который вы могли бы использовать — это абсолютно позиционировать один элемент с более низким z-индексом, чтобы другое изображение располагалось сверху, настроить ширину каждого изображения, чтобы мы могли видеть их оба, и это будет работать, верно?

Нуууу, когда вам понадобится текст или любой другой контент после изображений, вы столкнетесь с проблемой. Если элемент с абсолютным позиционированием выше статического (верхнего) изображения, следующий контент будет перекрывать изображения. Это связано с высотой изображения с абсолютным позиционированием, оно не распознается, поскольку находится вне потока документов (нормальное поведение для элемента с абсолютным позиционированием). Чтобы обойти это, вы можете начать экспериментировать с произвольной высотой изображений, и тогда компонент станет очень хрупким, ограниченным и не стабильным.

Я не рекомендую это. Пример того, о чем я говорю, здесь:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Хорошая новость: есть гораздо лучший способ, и не пытайтесь сделать это первым способом, если только вам не нравится головная боль.

Я опишу два надежных подхода к перекрывающимся изображениям.

Метод 1: CSS Grid

Прежде чем я услышу ворчание о необходимости поддержки IE и поэтому вы не можете использовать CSS Grid, я говорю, что вы легко можете использовать CSS Grid и запасной вариант для IE. Я покажу вам, как его создать в последнем разделе.

Одна из моих любимых вещей в CSS Grid (помимо единиц fr или свойства min-max) — это возможность перекрывать изображения, изменяя z-индексы, не извлекая ничего из обычного потока документов!

Сначала мы проанализируем этот компонент. Несколько вещей, на которые стоит обратить внимание:

Компонент будет работать независимо от высоты верхнего или нижнего изображения. (Это следует учитывать, когда у клиентов есть возможность загрузить любое изображение через CMS)

Верхнее изображение всегда будет слегка смещено вниз и будет выровнено по левому краю контейнера.

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

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