Как расположить текст на картинке css

Как разместить текст поверх изображения без абсолютного позиционирования или установки изображения в качестве фона

Я пытаюсь понять, можно ли поместить текст поверх изображения, не используя position: absolute или имея изображение, являющееся фоном элемента.
Причина ограничений в том, что HTML-код отправляется в электронное письмо, и оказывается, что hotmail не поддерживает ни то, ни другое.
Я помню, что когда я впервые начал изучать CSS, возясь с плавающим текстом вокруг изображений, я часто получал, что текст весело перемещается по всему изображению. К сожалению, я не могу воспроизвести такое поведение.

Полный текст (отредактировано):
Я получил модный макет от графического дизайнера. По сути, это приятное фоновое изображение с логотипами, ссылающимися на веб-сайты, и, по сути, областью «текст идет сюда» посередине.
Как обычно в этих случаях, я использую таблицы, чтобы убедиться, что все остается на месте И работает кроссбраузер + кросс-клиент.
Проблема возникает из-за того, что средняя область «текст идет сюда» не является белым прямоугольником, а имеет фоновую графику.
Проведя несколько тестов, выяснилось, что Live Hotmail не нравится ни position: absolute, ни background-image; относительные поля также не подходят, потому что они испортят остальную часть макета.

Текущая версия, работает в любом другом почтовом клиенте / на сайте:

Конечно, «это невозможно» могло бы быть вполне приемлемым ответом, но я надеюсь, что нет;)

6 ответов

Я всегда проделывал подобные трюки, как только приходили столы. Действительно некрасиво и может серьезно смутить любой валидатор, через который вы его запускаете: перекрывающиеся ячейки таблицы. Хотя работает в большинстве браузеров и даже без css.

Я знаю, я заслуживаю отрицательного голоса за это.

Если вы используете абсолютное позиционирование, вы должны указать атрибуты left и top . Кроме того, вы должны установить position:relative; для некоторого родительского элемента, чтобы сделать его слоем, чтобы при абсолютном позиционировании этот элемент использовался в качестве источника. Если вы не укажете источник, это может быть окно или какой-то другой элемент, и вы не знаете, где окажется ваш абсолютно позиционированный элемент.

Есть и другие альтернативы размещению элементов друг над другом, каждый со своими ограничениями.

Вы можете использовать относительное позиционирование, чтобы текст отображался поверх изображения:

Вы можете использовать плавающий элемент внутри другого элемента, чтобы поместить текст поверх изображения:

Лучший способ контролировать внешний вид — сделать текст частью самого изображения. Конечно, если вы используете формат изображения с потерями, такой как jpeg, с высокой степенью сжатия, он может выглядеть очень плохо, но, может быть, вам подойдет PNG? Или, в зависимости от количества цветов, может работать гифка.

Это также дает вам единообразные шрифты, фильтрацию и т. Д.

Вы можете попробовать установить отрицательные поля. Это очень сложно поддерживать во всех макетах, кроме наименее сложных. Эффективное отрицательное поле «тянет» элемент в этом направлении.

Скажем, если у вас есть родительский блок, изображение и абзац внутри него, задайте положение «относительно» для всех трех из них и дайте «z-index» дочерним элементам, скажем, «20» изображение и «21» для текста. текст появится поверх изображения. и вы можете настроить текст с помощью «сверху, слева, справа или снизу»

Расположить текстовый блок поверх картинки без смещения контента

Расположить фиксированный элемент, поверх остального контента
Подскажите, пожалуйста, каким образом сделать фиксированный элемент с помощью css, чтобы он не.

Как расположить элементы поверх картинки?
Доброе утро, форумчане! Который день пытаюсь прилепить текст комментариев и заголовок к картинке.

Расположить верхний блок поверх нижнего
Не знаю возможно ли это, но мне нужно чтобы белая строка со списком (Save big w/ us, always on.

Отображение определённого контента поверх основного на странице (без перехода на другую)
Добрый день! Появилась надобность сделать так, чтоб при нажатии на кнопку, расположенной в.

Текст поверх картинки html

При создании блога или сайта иногда требуется разместить текст поверх картинки или текст поверх изображения. Познаний html, чего греха таить, у многих блоггеров не хватает, а то и вовсе нет. Ничего страшного, даже если и так. Используем Атрибут position в HTML

Можно скопировать простой код и использовать его немного модифицируя под свои нужды. Приведу простой пример:

Есть картинка:

Текст поверх картинки html

Есть текст:
Текст поверх картинки html

Есть код:

<h2>Текст поверх картинки HTML</h2>

<img src="/mbg.png" title="Текст поверх картинки html" alt="Текст поверх картинки" / >

Получаем на выходе:

Текст поверх картинки HTM

Текст поверх картинки

Текст поверх картинки html Рис.2 Блочный элемент <div> с текстом находится внутри блочного элемента <div> с картинкой. ( см. подробнее о теге <div> )

Нужно правильно указать путь к картинке. С помощью тегов «position: relative ; left:20px; top:200px;» можно отрегулировать отступ текста слева и сверху.

Буквам тоже можно задать любой цвет и размер, было бы желание, и тогда вы сможете написать любой текст поверх картинки, поверх изображения с помощью HTML.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *