Почти все сайты используют так называемые бейджи, чтобы привлечь внимание людей к определенному товару или услуге. Это отличный способ проинформировать клиентов об определенных акциях, скидках, новых поступлениях и других интересных предложениях вашей компании.
Если у вас возникла необходимость нанести бейдж на картинку, то ниже вы найдёте два примера, как это можно сделать с помощью CSS.
Надпись на картинке с помощью свойства content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Бейдж для карточки товара</title>
<style>
.img-wrap {
position: relative; /* Позиционирование */
}
.img-wrap::after {
content: "Топ продаж"; /*Текст на бейдже*/
position: absolute;
top: 0; /*Позиция вверху*/
left: 0; /*Позиция слева*/
padding: 5px;
background-color: #ff0000;
color: #ffffff;
}
</style>
</head>
<body>
<div class="img-wrap">
<img src="/Ссылка на картинку">
</div>
</body>
</html>Пример на Codepen
See the Pen Бейдж на картинці за допомогою властивості content by Dmitro Nikolaienko (@d-nik) on CodePen.
Надпись поверх картинки с помощью позиционирования и z-index.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Надпись поверх картинки</title>
<style>
.img-wrap {
position: relative; /* Добавляем позиционирование для контейнера картинки */
}
.img-badge {
position: absolute; /* Позиционируем текст абсолютно в отношении родительского элемента */
top: 0; /* Устанавливаем позицию сверху */
left: 0; /* Устанавливаем позицию слева */
background-color: rgba(255, 255, 255, 0.5); /* Добавляем фон с прозрачностью для читаемости текста */
padding: 10px; /* Добавляем отступы для лучшего вида */
z-index: 1; /* Устанавливаем индекс, чтобы текст был поверх картинки */
}
.img-wrap img {
display: block; /* Обеспечиваем, чтобы картинка отображалась как блочный элемент */
max-width: 100%; /* Обеспечиваем, чтобы картинка не выходила за пределы родительского элемента */
height: auto; /* Разрешаем картинке сохранять соотношение сторон */
}
</style>
</head>
<body>
<div class="img-wrap">
<img src="/Ссылка на картинку">
<h2 class="img-badge">Текст на картинке</h2>
</div>
</body>
</html>Пример на Codepen
See the Pen Напис поверх картинки за допомогою позиціонування та z-index by Dmitro Nikolaienko (@d-nik) on CodePen.
Угостить автора чашечкой кофе