Как сделать отображение текста поверх картинки?
.recipe {
margin-top: 86px;
height: 458px;
margin-left: 157px;
margin-right: 157px;
background-image: url(../images/dish_photo.png);
background-repeat: no-repeat;
background-size: cover;
}<div class="recipe">
<div class="recipe_text">
<a>Bananas Foster Ice Cream Cake</a>
</div>
</div>Результат:
Ответы (1 шт):
Автор решения: UModeL
→ Ссылка
Нужно просто добавить свойство display и соответствующее выравнивание:
.recipe {
margin-top: 86px;
height: 458px;
margin-left: 157px;
margin-right: 157px;
background-image: url(https://i.stack.imgur.com/XBFDX.png);
background-repeat: no-repeat;
background-size: cover;
/* добавлено */
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px #444;
font: bold 26px/1em sans-serif;
}
.recipe_text {
text-align: center;
transform: scaleY(3);
text-shadow: 0 0 1px white, 0 0 3px white, 0 0 6px white;
}<div class="recipe">
<div class="recipe_text">
<a>Bananas Foster Ice Cream Cake</a>
</div>
</div>