Как на картинке написать текст в css?
2 ответа
от
Ekaterina_90 ,
2 года назад
@fred Написать текст на картинке можно следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .image { position: relative; } h2 { position: absolute; top: 250px; left: 0; width: 100%; } h2 span { color: #fff; font-size: 30px; line-height: 55px; padding: 10px; } </style> </head> <body> <div class="image"> <img src="image/3.png" /> <h2> <span>Любой текст</span> </h2> </div> </body> </html> |
от
dan_farrell ,
год назад
@fred
Чтобы написать текст на картинке с помощью CSS, вы можете использовать следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style>
.background-image {
background-image: url('path/to/your/image.jpg');
height: 500px; /* Высота картинки */
width: 500px; /* Ширина картинки */
background-size: cover; /* Масштабирование картинки */
display: flex;
align-items: center;
justify-content: center;
}
.text-on-image {
color: white; /* Цвет текста */
font-size: 36px; /* Размер шрифта */
text-align: center;
}
</style>
<div class="background-image">
<div class="text-on-image">
Текст на картинке
</div>
</div>
|
Вы можете изменять размеры, цвета и шрифты в соответствии со своими потребностями.
15