Как поверх картинки написать текст в css?
2 ответа
@carlo.cummerata Поверх картинки написать текст в CSS можно так:
HTML:
1 2 3 4 5 6 7 8 |
<body> <div class="image"> <img src="image/12.png" /> <div class="image2"> <span>Текст на картинке</span> </div> </div> </body> |
CSS:
1 2 3 4 5 6 7 8 |
.image { position: relative; } .image2 { position: absolute; color: brown; bottom: 50%; } |
@carlo.cummerata
Чтобы написать текст поверх картинки в CSS, можно использовать свойство position и сочетание свойств top, right, bottom и left. Вот пример:
HTML:
1 2 3 4 |
<div class="container"> <img src="path/to/image.jpg" alt="Картинка"> <div class="text">Текст поверх картинки</div> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.container { position: relative; width: 500px; /* задаем ширину контейнера */ } img { max-width: 100%; /* картинка займет всю доступную ширину контейнера */ } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.8); /* задаем полупрозрачный фон */ padding: 20px; /* задаем отступы */ font-size: 24px; /* задаем размер шрифта */ } |
В данном примере мы используем контейнер, который имеет относительное позиционирование. Картинка имеет максимальную ширину, чтобы занять всю доступную ширину контейнера. Для текста мы используем абсолютное позиционирование и задаем ему отступы и полупрозрачный фон, чтобы он был более читабельным на фоне картинки. Мы также используем свойство transform для центрирования текста по вертикали и горизонтали.
Обратите внимание, что размеры и стили элементов могут отличаться в зависимости от ваших потребностей и дизайна.