Как сделать - Изображение героя
Узнайте, как создать изображение героя с помощью CSS.
Изображение героя
Изображение героя - это большое изображение с текстом, часто размещаемое в верхней части веб-страницы:
Создать изображение героя
Шаг 1) Добавить HTML:
Пример
<div class="hero-image">
<div class="hero-text">
<h1>Я Вася Пупкин</h1>
<p>И я фотограф</p>
<button>Нанять меня</button>
</div>
</div>Шаг 2) Добавить CSS:
Пример
body, html {
height: 100%;
}
/* Образ героя */
.hero-image {
/* Используйте "линейный градиент", чтобы добавить эффект более темного фона к изображению (photographer.jpg) Это позволит сделать текст более удобным для чтения */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
/* Установите определенную высоту */
height: 50%;
/* Расположите и центрируйте изображение, чтобы оно хорошо масштабировалось на всех экранах */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Поместите текст в середине изображения */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}Редактор кода »