Чтобы разместить текст внутри картинки в CSS, вы можете использовать несколько подходов.
- С помощью свойства background-image:
HTML:
<div class="image-with-text">
<div class="text-container">
<h2>Заголовок текста</h2>
<p>Некоторый текст описания</p>
</div>
</div>
CSS:
.image-with-text {
background-image: url('path-to-image.jpg');
background-size: cover;
background-position: center;
height: 400px;
width: 100%;
position: relative;
}
.text-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}
Этот код создаст блок с картинкой в качестве фона и текстом внутри блока. С помощью свойства background-image заполняем блок фоновым изображением и настраиваем его размер и позицию. Затем, помещаем текст внутри блока с помощью позиционирования элементов CSS.
- С помощью тега img:
HTML:
<div class="image-with-text">
<img src="path-to-image.jpg" alt="alt-text">
<div class="text-container">
<h2>Заголовок текста</h2>
<p>Некоторый текст описания</p>
</div>
</div>
CSS:
.image-with-text {
height: 400px;
width: 100%;
position: relative;
}
.image-with-text img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
.text-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
z-index: 1;
}
Этот код создаст блок с изображением в теге <img> и текстом внутри блока в отдельном контейнере. Просто добавляем картинку на страницу с помощью тега <img> и устанавливаем ее размеры с помощью свойств height и width. Затем, помещаем текст внутри блока с помощью позиционирования элементов CSS, используя свойство z-index для помещения текста поверх изображения.
Выберите подход, который лучше всего соответствует вашим потребностям и настройте его с помощью своих стилей.