Как поместить текст на картинку html: Как сделать текст на изображении

Изображение просто сидит там, где оно обычно сидит. Текст, отформатированный с размером шрифта +2 и зеленым цветом, был помещен в раздел. Затем команды таблицы стилей размещают ее на расстоянии 250 пикселей от верхней части окна браузера и 20 пикселей от левой стороны. Команда высоты и ширины задает высоту и ширину раздела, внутри которого будет располагаться текст. Вы не должны устанавливать его шире изображения. Таким образом, вы уменьшите вероятность перекатывания текста по сторонам.

Это то…

Большинство из вас, вероятно, в конечном итоге будут использовать фоновый метод TABLE вверху, но, возможно, нет. Итак, теперь вы можете использовать в своих изображениях столько мудрых слов, сколько сможете собрать. на данный момент у меня нет.

 

Наслаждайтесь!

Популярные статьи

Рекомендуемые

Напишите хороший альтернативный текст для описания изображений

Некоторые люди лучше понимают сложную информацию, когда она представлена ​​визуально, например, в виде диаграммы или диаграммы, в то время как другие считают, что чтение информации им больше подходит. Людям, использующим программы чтения с экрана, для понимания важен хороший текстовый эквивалент информации, представленной в графическом виде.

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

Пример

В этом примере мы собираемся предоставить текстовую альтернативу для графика, используя HTML, чтобы присвоить графику атрибут alt и некоторый видимый текст для предоставления дополнительной информации.

Альтернативный текст для графика (предоставляемый через его атрибут alt, который вы можете добавить при загрузке изображения с помощью веб-редактора) был бы слишком длинным, если бы он описывал все на графике, поэтому он просто описывает назначение графика. И, поместив этот абзац первым, мы гарантируем, что пользователи программ чтения с экрана смогут получить необходимую им информацию.

Источники СМИ для войны в Ираке

Анализ освещения в СМИ периода войны в Ираке отнюдь не был универсально объективным. На самом деле ясно, что освещение в целом было провоенным, причем американские источники новостей были немного более провоенными, чем источники из-за пределов США. Нейтральное освещение составило 26%, в то время как меньшинство источников было настроено против войны. Только 3% американских источников попали в эту категорию.

См. также: Опишите содержание изображений ✎, Слепой, Слабое зрение, Когнитивный, Программа чтения с экрана, Увеличение экрана, Режим высокой контрастности, Пользовательская таблица стилей, Воспринимаемый, Альтернативы, Изображения, HTML, SVG

Некоторым людям с трудностями чтения или нарушениями зрения необходимо настроить отображение текста, чтобы его было легче читать. Когда текст представлен в виде изображения текста, это ограничивает их возможности изменять внешний вид этого текста. Поэтому везде, где это возможно, используйте текст вместе с CSS для применения стиля (например, цвета, шрифта или размера).

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

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

Примеры

✗ Плохой пример

В WYSIWYG-редакторе можно загрузить изображение какого-нибудь текста (скажем, «вкусных блинов») и вставить его на страницу с альтернативным текстом, точно совпадающим с текстом:

 png" alt="вкусные блины" />

 

Одним из недостатков здесь является то, что программы чтения с экрана в некоторых контекстах будут читать альтернативный текст с добавлением «графика», и вы можете не хотеть, чтобы пользователь знал, что текст на самом деле является изображением. Кроме того, текст внутри изображения нельзя перевести на другие языки, выбрать для копирования/вставки или изменить размер без ухудшения качества.

✓ Используйте CSS и веб-шрифты

Напишите текст как текст в редакторе и позвольте системе публикации применить стиль.

Текст будет оформлен с использованием веб-шрифтов и свойств CSS, таких как background , text-shadow и color .

.pancakes-текст {
  семейство шрифтов: PancakeFont, FallbackFont, без засечек;
  цвет: песочно-коричневый;
  text-shadow: 0.02em 0.02em 0 Коричневый,
                        0 0 0.5em фиолетовый;
}

 

Редактор кода

Вы можете поэкспериментировать со стилями текста CSS в этом редакторе кода, используя приведенные выше правила в качестве отправной точки.

См. перо Стилизация текста CSS от HUIT — службы веб-доступа, UX и цифровой доступности (@hwpdas) на КодПене.

См. также: Описание содержания изображений ✎, Дизайн для удобочитаемости ✎, Поддержка гибкости и адаптации ✎, Слепой, Слабовидящий, Когнитивный, Программа чтения с экрана, Увеличение экрана, Режим высокой контрастности, Пользовательская таблица стилей, Воспринимаемый, Изображения, Текст, CSS , HTML

Люди различаются тем, как они могут (или хотят) потреблять информацию, особенно в образовательных контекстах. Некоторые люди могут предпочесть информацию, представленную в виде текста, видео или аудио; и их потребности в доступности также могут влиять на их предпочтения.

Но в то время как доступность для изображений часто фокусируется на предоставлении текстовой альтернативы для пользователей программ чтения с экрана, мы также можем посмотреть на проблему с другой стороны — предоставить графическую альтернативу тексту, чтобы облегчить понимание лежащей в основе информации или концепции. Это включает в себя для людей с трудностями чтения.

Пример

Представьте себе, что для описания — в данном случае — распределения источников энергии для производства электроэнергии в Румынии были использованы некоторые прозы:

«Однако, когда мы рассматриваем тенденции энергопотребления дальше на восток в Европе, мы можем рассмотреть в качестве примера карпатскую нацию Румынии. Здесь мы находим интересную картину, когда электричество обеспечивается различными источниками энергии, при этом ни один источник энергии не составляет явное большинство. Согласно самой последней доступной нам статистике, мы видим, что гидроэлектроэнергия является наиболее распространенным источником чуть более одной трети (36%), за которым следует уголь (33%), затем атомная энергия (19%).%), а газ – 10 %. Завершая картину Румынии, мы обнаруживаем, что другие источники энергии составляют оставшиеся 2%».

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

См. также: Опишите содержание изображений ✎, Используйте изображения и мультимедиа для улучшения понимания ✎, Когнитивные, Воспринимаемые, Понятные, Изображения, HTML, PDF, Powerpoint, Word

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

Примеры

Давайте рассмотрим несколько примеров подходящего альтернативного текста с использованием одного и того же логотипа Гарвардского университета в разных контекстах.

Автономный

В этом базовом примере мы просто используем логотип Гарварда, чтобы указать, что страница связана с Гарвардским университетом. В этом случае в альтернативном тексте должно быть что-то вроде «Логотип Гарвардского университета».

Но если бы логотип был предоставлен в качестве примера дизайна логотипа, мы могли бы пойти дальше и выбрать что-то вроде «Логотип Гарвардского университета с черным текстом с засечками и красной эмблемой в виде щита», как в этом примере:

Внутри ссылки

В веб-дизайне принято использовать изображение логотипа в качестве ссылки на домашнюю страницу сайта. В этом случае мы будем использовать альтернативный текст, описывающий действие ссылки. После размещения логотипа внутри ссылки, указывающей на домашнюю страницу, подходящим альтернативным текстом может быть «Домашняя страница Гарвардского университета» или аналогичный. Программа чтения с экрана определит, что изображение также является ссылкой, и скажет: «Домашняя страница Гарвардского университета, ссылка».