#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
Я хочу добавить текст на изображение, придав тексту прозрачный черный фон. По сути, я хочу добиться эффекта, описанного в следующей ссылке:
Проблема в том, что я динамически генерирую эти изображения и случайным образом размещаю их на экране. Поэтому я не могу полностью расположить текст (по крайней мере, не зная общей высоты текста). Есть ли другой способ сделать это?
Спасибо!
Комментарии:
1. Конечно, вы можете расположить текст, видя, что он находится внутри того же контейнера, что и изображение, если вы используете код из этого руководства. Я не вижу, в чем проблема, но ваш вопрос довольно расплывчатый. Нам нужно увидеть разметку, демонстрацию или какие-то скриншоты.
Ответ №1:
вы можете позиционировать текст абсолютно. как только изображения будут загружены, даже если случайным образом, метод position() jQuery предоставит вам всю необходимую информацию.
очевидно, вы хотели бы инкапсулировать изображения в контейнеры, например, или использовать и устанавливать изображение, используя фоновое изображение div. тогда у вас есть полная свобода помещать в контейнер любой текст / эффекты, которые вы хотите.
Комментарии:
1. я пытаюсь избежать использования img в качестве фона, т.Е. по соображениям совместимости.
2. итак, тогда просто используйте <div><img></div> и используйте append() и z-index jQuery для размещения текста / других виджетов над изображением. помните, что эффекты должны располагаться только относительно div контейнера.
3. Я хочу расположить текст вдоль нижней части фотографии, откуда мне знать, как далеко идти?
4. Создайте класс для текста и установите фиксированную высоту, независимо от длины по ширине, высота будет одинаковой, и вы можете производить вычисления таким образом.
5. если вы хотите добавить текст вдоль нижней части фотографии, используйте относительное позиционирование И используйте right: 0px; bottom: 0px; это поможет.
Ответ №2:
Я динамически генерирую эти изображения и случайным образом размещаю их на экране.
Не видя часть кода, который у вас есть до сих пор, немного сложно помочь. Если вы динамически генерируете изображения, не могли бы вы также динамически генерировать текст вместе с ним?
Т.е. вместо генерации:
<img style="position: absolute; top: RANDOMVALUE; left: RANDOMVALUE;">
Не могли бы вы создать:
<div class="image-with-text-over-it" style="position: absolute; top: RANDOMVALUE; left: RANDOMVALUE;">
<img>
<p>Text to be overlaid on image</p>
</div>
А затем в вашей таблице стилей напишите некоторый CSS, который позиционирует текст в каждом экземпляре этого поверх изображения в этом экземпляре:
.image-with-text-over-it p {
position: absolute;
bottom: 2em;
left: 0;
color: #fff;
background: rba(0, 0, 0, 0.8);
}
Комментарии:
1. да, но это поместило бы текст под изображением, а не сверху
2. и под этим я подразумеваю вниз, а не снизу
3. @chacham15: ну да, но тогда вы могли бы использовать CSS для позиционирования текста относительно окружающего
<div>, чтобы он был поверх изображения.4. если по какой-либо причине вам не нравится описанный выше подход, альтернативой может быть установка изображения в качестве фона элемента, содержащего текст, например
<p style="background: url(dyanmicImage.png); height: height-of-image; width: width-of-image">some text</p>, и использование отступов для размещения текста. требуется меньше элементов, но я думаю, что приведенный выше подход в целом проще!