Как в before вставить картинку css

5 приемов с псевдоэлементами before after CSS 3

Большинство людей считает, что большой разницы между псевдоклассами и CSS active нет. Но одно различие между ними все-таки существует.

Мы все знаем, что эти классы и элементы используются как часть CSS3 . Данные псевдоэлементы были определены в CSS3 .

Обновлено: 2022-04-21 17:35:53 Вадим Дворников автор материала

Псевдоклассы и псевдоэлементы CSS — в чем разница?

Псевдокласс: Используется как селектор для элементов, которые нельзя задать с помощью простых селекторов. А также эффекты CSS , которые не могут быть заданы с помощью конкретных селекторов.

Например, :hover, :active

Псевдоэлемент : Используется для создания новых элементов, которые не существуют в документе, они управляются как обычный селектор.

Например, ::after, ::before

Для псевдоклассов мы используем одно двоеточие ( : ), а для псевдоэлементов — двойное ( :: ), которое является частью синтаксиса CSS3. Браузеры поддерживают оба типа синтаксиса, но в IE ( ниже 9 версии ) не поддерживается формат двойного двоеточия ( :: ).

Важным свойством псевдоэлементов hover active CSS является content: “ ” .

Значения свойства content :

content: «»
content: «любое конкретное значение»

Теперь рассмотрим приемы работы с псевдоэлементами.

Метод 1: Псевдоэлементы со шрифтом Awesome

Согласно последним тенденциям веб-дизайна, большинство сайтов используют Font Awesome для создания шрифтов иконок, а не изображения. Что увеличивает скорость загрузки сайта.

• Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Как добавить изображение на страницу

Добавление изображений на страницу — типовая задача веб-разработчиков. Её можно выполнить разными способами: вставить картинку в разметку через теги , или использовать в CSS с помощью background-image .

Вставка изображений в теге

Для каких изображений подходит: для логотипов, фото, иллюстраций, графиков и других контентных изображений.

�� Контентные изображения тесно связаны по смыслу с содержимым страницы и дополняют его. Например, к таким изображениям относятся фото сотрудников в разделе «О нас» или схема проезда к отелю.

Чтобы вставить изображение с помощью , нужно добавить в тег четыре обязательных атрибута:

• src — указывает путь до картинки;
• alt — добавляет альтернативный текст, который отображается, если изображение не загрузилось;
• width — задаёт ширину изображения;
• height — задаёт высоту изображения.

С помощью такого кода можно вставить фото кота Кекса шириной 1024px и высотой 683px .

Вставка через

Для каких изображений подходит: для векторных в формате SVG.

С помощью этого способа вы можете добавить иконки, чтобы затем менять их состояние.

Иконки добавляются с помощью тега , в котором прописываются размеры изображения. Например, иконку VK из примера выше можно вставить так:

Небольшое отступление. Возможно, вы не знакомы с классом visually-hidden — его добавляют элементам, которые нужно скрыть в интерфейсе. В нашем случае с таким классом создаёт подпись «Вконтакте». Её смогут прочитать скринридеры, но не увидят пользователи. Добавлять такие подписи к иконкам — хорошая практика.

Вставка через CSS

Для каких изображений подходит: для декоративных.

�� Декоративные изображения нужны для украшения страницы. Их отсутствие не поменяет смысл контента, поэтому они имеют только оформительское назначение.

Есть два способа вставить декоративное изображение: сделать фоном или добавить как псевдоэлемент.

Добавление фоновых изображений

Для добавления фоновых изображений используется CSS-свойство background-image . Вместе с ним нужно прописать размеры изображения — width и height .

Например, на странице есть контейнер с классом .image-container :

Чтобы задать ему фон, нужно написать следующий код:

.image-container < background-image: url("images/keks.jpg"); width: 600px; height: 400px; >

Это минимальный набор CSS-правил. Часто фронтендеры используют дополнительные правила, чтобы изменить позицию и размеры изображения или запретить повтор фоновой картинки.

CSS-свойство background-attachment указывает, что делать с изображением: зафиксировать его позицию в области просмотра или пролистывать вместе с содержимым контейнера.

• scroll — значение по умолчанию. Фон прокручивается вместе с содержимым.
• fix — фон фиксируется.
• local — фон фиксируется с учётом содержимого элемента.

CSS-свойство background-position управляет расположением фона по осям X и Y, то есть по вертикали и горизонтали. Ему можно задавать значения, используя ключевые слова, процентные значения или конкретные величины, например, 100px . Ключевые слова для расположения по оси X:

• right — право;
• left — лево.

Ключевые слова для расположения по оси Y:

• top — сверху;
• bottom — снизу.

Можно сочетать разные значения:

background-position: 100px top; /* фон отступит 100px от левого края, останется сверху*/ background-position: 50% bottom; /* фон будет посередине и снизу*/ background-position: left 100px; /* фон будет слева и отступит 100px от верхнего края*/ 

Если нужно задать положение только по одной оси, используйте свойства background-position-x и background-position-y . Они принимают такие же значения, как и background-position .

Следующее CSS-свойство — background-repeat , оно задаёт повтор изображения. По умолчанию у свойства стоит значение repeat , то есть фоновое изображение повторяется по вертикали и горизонтали:

Чтобы изменить это поведение, надо поменять значение:

• no-repeat — не повторять изображение,
• repeat-x — повторять только по горизонтали
• repeat-y — повторять только по горизонтали.

CSS-свойство background-size определяет размеры изображения. Ему также можно задавать значения в виде ключевых слов, процентов или конкретных размеров.

background-size: /*размер по ширине*/ /*размер по высоте*/ 

• auto — оставляет исходный размер изображения.
• contain — масштабирует изображение по ширине или высоте, чтобы оно заполнило контейнер. Картинка при этом не обрезается.
• cover — масштабирует изображение, сохраняя пропорции изображения. Картинка может обрезаться.

Чтобы было понятнее, посмотрим на примере. Оранжевыми рамками выделена область контейнера. Когда мы задали свойство background-size со значением contain , картинка заполнила всю высоту контейнера и осталась целой.

А когда мы задали cover , фото Кекса обрезалось и растянулось на всю ширину контейнера.

Есть и другие CSS-свойства. Почитайте о них в спецификации W3C.

При использовании фоновых изображений обязательно добавляйте цветной фон-подложку, особенно если у вас на сайте белый текст. Это важно, ведь у пользователей может быть плохое интернет-соединение, при котором картинки долго загружаются. Тогда посетители сайта увидят белый текст на белом экране.

Использование псевдоэлементов

Небольшие декоративные элементы добавляются с помощью псевдоэлементов ::before и ::after . Эти псевдоэлементы создают внутри элемента псевдотег, который можно стилизовать. Например, вы можете добавить ему фоновое изображение или текст.

�� Этот псевдотег — виртуальный, вы не увидите его в разметке сайта.

Псевдоэлемент ::before добавляет псевдотег в начале, ::after — в конце. Вот пример использования псевдоэлемента на сайте HTML Academy. Перед вами блок с тремя тегами

. В каждом из них лежат для важных цифр и для обычного текста. Когда мы добавляем абзацу ::before , внутри

появляется ещё один псевдотег — с картинкой.

Принцип добавления картинки похож на тот, что мы рассматривали при вставке фоновых изображений. Только здесь мы добавляем фон не контейнеру, а псевдотегу:

 
 1507 Заданий и испытаний 
 

.wrapper::before < content: ""; width: 600px; height: 400px; display: block; background-image: url("images/keks.jpg"); background-repeat: no-repeat; background-position: center; >

Разберём, что мы делаем.

Указываем содержимое. Мы используем свойство content с пустым значением, чтобы псевдоэлемент отобразился на странице. Обычно значением этого свойства является текст, но так как нам нужна только фоновая картинка, ставим значение «» .

Делаем псевдоэлемент блочным. Прописываем размеры: ширину и высоту.

Добавляем фон. Указываем путь до картинки, убираем повтор и размещаем изображение по центру.

Заключение

Мы рассмотрели четыре основных способа вставки изображения. Первый выглядит самым простым, но он не всегда уместен. Поэтому выбирайте метод вставки, ориентируясь не на простоту работы, а на задачу и тип изображения. Например, логотип лучше добавлять с помощью , а красивую фоновую картинку можно вставить с помощью background-image .

Следуйте этому правилу, и пользователи полюбят ваш сайт.

Другие статьи о графике

• Как отличить контентное изображение от декоративного
• Растровая и векторная графика
• Как вставлять SVG
• Где скачать бесплатные фотографии для сайта

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Как вставить картинку с помощью псевдоэлемента before?

В примере не видно разметки, поэтому сразу стоит оговорить, ::before и ::after есть только у парных тегов. У img, input и прочих они не будут работать.

content: «../img/services_ball.png»; — Ваша ошибка здесь. В content обычно записывается текст. И CSS не может узнать, что переданный текст вдруг оказался картинкой. Для этого ему нужно прямо указать об этом, через:

Минусы такого варианта:

1. Нельзя менять размеры картинки,
2. В content можно было бы прописать дополнительный текст поверх картинки, но он уже занят картинкой.

• background-image: url(«my-img.png») — Поэтому, можно задать псевдоэлементу конкретные размеры и разместить картинку как фон:

.bubu < position: relative; /* Это важно, если псевдоэлемент нужно позиционировать относительно этого блока */ width: 100px; height: 100px; background: orange; >.bubu::after < content: ""; /* В любом случае необходим, даже пустой. Иначе не будет работать */ position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background-image: url('https://i.imgur.com/MJekAr4.gif'); background-size: 100px 100px; box-shadow: 1px 1px 5px #000; >

Как настроить размер и позицию картинки в псевдоэлементе ::before?

Прописал путь картинка отобразилась, но она большая и встала выше текста. Как задать ей размер и при желании позицию? Что надо добавить?

• Вопрос задан более трёх лет назад
• 3808 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 1

Dymok @UnluckySerivelha

Примерно так

.authorization a < position: relative; >.authorization a::before < content: ''; position:absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/user.svg); margin-right: 3px; >

Ответ написан более трёх лет назад