Майже всі сайти використовують так звані бейджі, для того, щоб привернути увагу людей до певного товару чи послуги. Це чудовий спосіб проінформувати клієнтів про певні акції, знижки, нові надходження та інші цікаві пропозиції вашої компанії.
Якщо у вас виникла необхідність нанести бейдж на картинку, то нижче наведено два приклади, як це можна зробити за допомогою 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.
Пригостити автора кавою