Как сделать текст на картинке css?
2 ответа
от
kendall_mckenzie ,
3 года назад
Сделать текст на картинке css, можно так:
HTML:
1 2 3 4 5 6 |
<body> <div class="lol"> <img src="image/12.png"> <span>Привет!</span> </div> </body> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.lol { position: relative; display: inline-block; } .lol img { height: 100px; width: 100px; } .lol span { color: rgb(255, 255, 255); background: rgb(15, 15, 15); position: absolute; right: 0px; bottom: 30px; } |
от
stephania ,
2 года назад
@cristina.schaefer
Чтобы сделать текст на картинке с помощью CSS, вам нужно создать элемент HTML (например, div), который будет содержать картинку и текст. Затем вы можете использовать CSS, чтобы настроить позицию, цвет, размер и другие свойства текста. Например:
HTML:
1 2 3 4 |
<div class="image-text"> <img src="image.jpg" alt="image"> <p>This is some text on top of the image</p> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 |
.image-text { position: relative; } .image-text p { position: absolute; top: 10px; left: 10px; color: white; font-size: 24px; } |
В данном примере создается класс image-text, который содержит картинку и текст, и в нем мы задаем абсолютное позиционирование для текста, а так же задаем размер, цвет и другие свойства текста.
15