seodon.ru | Учебник HTML — Изображения для фонов
Опубликовано: 29.09.2010 Последняя правка: 08.12.2015
Изображения в качестве фонов используются в HTML не менее часто, чем просто изменения цвета фона, которые мы с вами уже проходили. И это вполне логично, ведь с помощью изображений можно сделать неоднотонный и более красочный фон.
Обычно, в качестве образца для фона применяются небольшие по размеру и объему (в килобайтах) рисунки, а все потому, что фоновые изображения браузеры обрабатывают иначе, чем обычные рисунки. Они берут эту маленькую картинку и замащивают ей, как кирпичиками, весь участок HTML-страницы или всю ее целиком.
В прошлых версиях HTML у некоторых тегов существовал специальный атрибут background, который позволял делать фоновое изображение. Но в том-то и дело, что только у некоторых, причем далеко не у всех, например у блочного тега <DIV> его не было. Сегодня я вам покажу способ, который можно применить абсолютно к любым HTML-тегам и опять мы используем стили (CSS), а точнее атрибут style.
<тег>…</тег>
Обязательно заключайте адрес картинки в одинарные кавычки, как показано. И если вы хотите сделать фоновый рисунок для всей страницы, то используйте style внутри тега <BODY>.
А скажите мне, это значение style вам ничего не напоминает? Да-да, вы уже сталкивались с подобным в уроке по изменению цвета текста и фона, только там мы меняли просто фоновый цвет HTML-элементов. А теперь давайте соединим наши знания и запишем все это вместе:
<тег>…</тег>
Обратите внимание, что точку с запятой посередине ставить не надо, так как оба значения относятся к фону. Вы спросите: «А для чего это делать, ведь браузер не сможет одновременно показывать фоновый цвет и фоновое изображение»? И будете совершенно правы! При такой записи браузер в первую очередь показывает фон-изображение, а не цвет. А теперь представьте, что у вас фоновое изображение — это рисунок в темных тонах, а цвет текста на странице вы сделали белым.
Поэтому всегда, слышите, ВСЕГДА указывайте фон-цвет и фон-изображение вместе, как показано в последнем варианте.
Пример создания фоновых изображений в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Фоновые изображения в HTML</title> </head> <body> <p>Созвездия в заоблачной дали<br>Раздумьям тщетным многих обрекли.<br>Одумайся, побереги рассудок -<br>Мудрейшие и те в тупик зашли.<br><b>Омар Хайам.</b></p> </body> </html>
Созвездия в заоблачной дали
Раздумьям тщетным многих обрекли.
Одумайся, побереги рассудок —
Омар Хайам.
В данном примере для фона я использовал вот это изображение: Если же будет отключен показ изображений, то фон станет просто черным.
Домашнее задание.
- Создайте заголовок статьи и шесть параграфов. Подчеркните текст заголовка и выделите его цветом #9999CC.
- Сделайте в последнем параграфе ссылку на любой сайт и установите на странице цвет #9999CC для ссылок при наведении курсора мыши.
- Установите на всей странице изображение-фон.
- Установите для всех параграфов другую картинку в качестве фона. Но сделайте так, чтобы у первых трех параграфов цвет внешних полей (отступов) совпадал с фоном страницы, а у остальных — с фоном самих параграфов.
- Вставьте на страницу изображение и выровняйте его по левому краю, но так, чтобы его обтекали только последние три параграфа.
- Установите у изображения внешние поля по 10px снизу и справа, а также 5px слева.
Посмотреть результат → Посмотреть ответ
| Изображения | ← Содержание → | Изображения — ссылки |
Как отличить контентное изображение от декоративного — Блог HTML Academy
Давайте разберёмся, что такое контентное изображение, что такое декоративное и как их отличить друг от друга.
От типа изображения зависит то, как оно будет добавлено на страницу.
Теория
Контентное изображение
Слово контент происходит от английского слова «content» — содержимое. С помощью таких изображений мы можем донести до пользователей полезную информацию. Чтобы добавить контентное изображение к себе на страницу, используйте в разметке <img>. Для изображений такого типа необходимо заполнять атрибут alt, который описывает то, что изображено на картинке.
Декоративное изображение
Из названия понятно, что этот тип изображений используется исключительно для оформления. Такие изображения не несут для пользователя полезной информации. Декоративные изображения следует реализовывать с помощью CSS.
Практика
В теории всё просто, но на деле мы можем столкнуться с неоднозначными ситуациями, в которых не так-то просто определить тип изображения. Давайте вместе рассмотрим различные ситуации на примерах.
Очевидные случаи
Изображение товара в карточке товара, контентное
Карточка товара на сайте EdoqueКарточки товаров на сайте CadburyТакие изображения содержат информацию о внешнем виде товара.
Если они по какой-либо причине не отобразятся, то пользователь потеряет часть информации о товаре.
Реализация: <img>
Логотип, контентное
Логотип на сайте Haribo-shopЛоготип на сайте EvercodelabПартнёрские логотипы на сайте SpeciaЛоготипы могут быть реализованы как текстом, так и изображением, поэтому нужно ориентироваться на конкретный макет. В приведённых выше примерах логотип представлен изображением, которое содержит важную информацию о названии сайта.
И также часто встречаются блоки с партнёрскими логотипами. В таких ситуациях логотипы являются контентными изображениями.
Реализация: <img>
Изображения и текст, контентное
Изображение в статье на сайте MeduzaИзображения товара на индивидуальной странице на сайте PichShopПримеры выше — изображения в статье. Данный случай ничем не отличается от карточки товара — у нас есть и описание, и изображение, несущие важную для пользователя информацию. Таким образом, изображение является контентным и должно быть сделано тегом <img>.
Реализация: <img>
Вспомогательная иконка, декоративное
Вспомогательные декоративные иконки на сайте MediaMarktВ примере иконки в меню имеют декоративный характер. Если вдруг они пропадут, информация не потеряется, и пользователь всё равно сможет понять в какой раздел ему нужно. Для реализации лучше всего использовать background-image для псевдоэлемента.
Реализация: background-image для псевдоэлемента
Другой пример из того же магазина. Изображение лишь дополняет подпись. Такие изображения лишь поясняют названия и являются декоративными.
Реализация: background-image для всего блока или для псевдоэлемента
Фоновое изображение, декоративное
Фоновая картинка с фруктами на сайте EdoqueПитерское фоновое изображение на сайте Sobor.gorozhanko.ruНа примерах выше мы можем рассмотреть варианты декоративных фоновых изображений. Для реализации лучше всего подойдёт background-image для всего блока.
Реализация: background-image для всего блока
Спорные моменты
Изображение в промослайдере
Слайдер на сайте CadburyВ элементах слайдера нам часто встречаются изображения товаров. Они несут в себе важную визуальную информацию о товаре, поэтому в таком случае нам следует отнести их к контентному типу изображений.
Реализация: <img>
Однако, бывает и такое, что в слайдере изображения никак не относятся к тексту слайдов и служат только для декоративных целей, следовательно, относятся к декоративному типу изображений.
Реализация: background-image для всего блока
Карта с изображением
Карта в блоке с контактами. Макет Девайс.Под интерактивную карту принято добавлять изображение с картой, на случай если интерактивная карта не загрузилась. Каким же образом её добавлять? Карта несёт информацию об адресе. Например, в макете Девайс с нашего базового интенсива по HTML и CSS. В блоке «Контакты» только по карте можно понять адрес компании, ведь в тексте адрес не продублирован, а значит если изображение потеряется, пользователь потеряет информацию о местонахождении компании.
Таким образом, изображения карт относятся к контентным изображениям.
Реализация: <img> (атрибут alt должен описывать изображение, в данном случае — Карта офиса по адресу улица Строителей, 15)
Иконки соцсетей
Социальные кнопки на сайте HariboКнопки с социальными сетями представляют собой более интересный случай. С одной стороны, они являются декоративными, так как являются частью интерфейса сайта, однако, если их картинки не загрузятся — информация всё же пропадёт (пользователь будет не способен понять к какой социальной сети относится каждая ссылка). Таким образом, здесь применяется комплексный подход: внутри ссылки обязательно прописывается поясняющий текст. Изображение на этих кнопках-ссылках декоративные. Для доступного скрытия текста ссылки необходимо добавить класс .visually-hidden. Описание этого паттерна скрытия можно почитать в нашей статье. Таким образом, при потере CSS-файла, изображение пропадёт, а текст ссылки появится. При нормальной работе сайта пользователь увидит лишь изображение.
Также необходимо не забывать про доступность — так как в разметке мы прописываем текст ссылки, то при чтении сайта скринридером, ссылки будут озвучены.
Реализация: background-image для ссылки
Вывод
Вопрос определения типа изображения способен запутать неокрепший ум начинающего верстальщика, поэтому советуем вам каждый раз, когда вы сталкиваетесь с необходимостью определить тип изображения, обращать внимание на все детали, а не идти самым простым путём.
Что ещё знать о графике
- Форматы изображений для веба
- Как правильно написать alt-текст
- Фигма или Фотошоп. Что выбрать новичку
Как добавить фоновое изображение в электронную почту в формате HTML
Визуальные элементы, особенно изображения, вызывают гораздо более быструю реакцию читателей, чем текст. Кроме того, исследования показали, что даже когда зрители видят изображение всего несколько секунд, они сохраняют много знаний. Многие визуальные эффекты могут быть использованы для установления взаимопонимания с читателем.
Маркетинг по электронной почте развивался на протяжении многих лет с включением многочисленных инновационных функций. Фоновые изображения в электронных письмах часто приглушены, а не в центре внимания. Они хорошо сочетаются с остальными элементами маркетинговой кампании компании. Они помогают в создании электронных писем в формате HTML, которые предлагают улучшенные возможности просмотра.
Они также предлагают широкий выбор вариантов дизайна, которые могут служить отличительной чертой маркетинговой стратегии компании от ее конкурентов. Чтобы более подробно остановиться на этой теме и узнать, как добавить фоновое изображение в ваше электронное письмо в формате HTML, у нас есть подробная статья для вас ниже. Продолжить чтение!
Оглавление
Статические фотографии и большие блоки текста немного монотонны в электронной почте. Использование привлекающих внимание изображений в качестве фона — это определенный подход к вовлечению подписчиков. Они придают дизайну электронной почты дополнительную глубину, выделяя его.
Вот некоторые из основных причин, по которым вам следует добавлять фоновые изображения в электронную почту HTM.
Простота наложения дополнительного содержимого HTML
Фоновые изображения, в отличие от традиционных изображений, могут включать различные уровни содержимого. Пользователи могут накладывать на фоновую графику свой собственный контент, например новое изображение, текст или призыв к действию.
Эстетическая особенность
В качестве чисто эстетического дополнения фоновые изображения в дизайне электронной почты служат приятным штрихом к общему представлению. Для этой цели вы можете использовать шаблоны электронной почты Stripo, нажав на эту страницу, где вы можете получить возможность добавлять фоновые изображения в шаблоны электронной почты. Это добавляет больше измерения и персонализирует электронное письмо, чтобы добавить к нему свой фирменный штрих.
Доступное для чтения содержимое
Преимущество фоновых фотографий заключается в том, что размещенная поверх них HTML-информация остается видимой.
Добавление фонового изображения почтовой программы придаст вашей рекламной кампании по электронной почте новый стиль. Он также способен увеличить вовлеченность аудитории и выделиться из толпы. Вот пошаговое руководство о том, как создать шаблон электронной почты с пользовательским фоновым изображением электронной почты. Приложение Stripo используется в этом руководстве в качестве примера.
- Запустите свою любимую дизайнерскую программу, а затем начните создавать шаблон электронной почты с нуля.
- Выберите «Внешний вид» в меню инструментов сайта, затем «Общие», а затем другие отображаемые параметры.
- С этого экрана можно активировать переключатель «Фоновое изображение».
- Затем выберите подходящее изображение из вашей галереи и нажмите «загрузить».
- После этого, используя настройки изображения «повторить» и «по центру», поместите изображение в то место, где вы хотите, чтобы оно отображалось в теле письма.
- Теперь вы можете без проблем отправить это письмо стольким людям, сколько позволяет система.
Заключение
Существует много возможностей для творчества, когда дело доходит до дизайна электронной почты, и один из лучших способов придать вашим электронным письмам значительное преимущество — включить фоновые изображения. Таким образом, электронные письма с большей вероятностью будут замечены.
Вот бесплатное руководство, в котором собрана вся информация из этой статьи, чтобы помочь вам применить эти методы на практике. Включены в них положительные эффекты на ваше электронное письмо в формате HTML, которые произойдут, когда вы включите фоновое изображение.
Новые разработки: встроенные изображения и фоновые изображения
Изображения повышают ценность веб-страницы, дополняя ее как визуально, так и эстетически. Изображения обеспечивают ценность, информацию и украшение. Изображения также бывают разных типов с точки зрения разработки.
Существует два основных типа изображений, которые пользователи фактически видят на веб-страницах: встроенные изображения и фоновые изображения. Оба предоставляют большие возможности для передачи информации аудитории, и каждый сталкивается с уникальными проблемами, чтобы обеспечить высочайшее качество веб-разработки.
Встроенные изображения — это то, о чем думают пользователи, когда видят изображение. Это изображения, отображаемые целиком по сравнению с фоновыми изображениями. Встроенные изображения — это изображения, которые передают пользователю ценность и информацию. Встроенные изображения поддерживают самые разные типы файлов: от jpg, png и svg до даже файлов gif и ico.
Встроенные изображения кодируются как минимум следующим образом:
Атрибут src является обязательным, так как он содержит путь к отображаемому изображению. Атрибут alt содержит текстовое описание изображения для стандартов доступности. Программа чтения с экрана зачитывает это описание, чтобы понять, что означает изображение.
Когда дело доходит до стилизации изображений, возникают две проблемы: высота и ширина. Изображения бывают самых разных форм и размеров. Портретные и ландшафтные изображения не могут быть одинаково масштабированы без искажений. Шесть примеров ниже подчеркивают проблемы с одним и тем же изображением с разной высотой и шириной.
Пример Один показывает изображение с фиксированной шириной и без заданной высоты. Измените размер окна браузера, чтобы увидеть, что оно выходит за пределы экрана. Он не реагирует на регулировку ширины окна.
Второй пример показывает изображение с фиксированной высотой и без заданной ширины. Возникает та же проблема, что и в первом примере.
Третий пример демонстрирует попытку придать изображению одинаковую высоту и ширину. Здесь изображение искажено. В то время как код может обеспечить равную высоту и ширину, исходные размеры изображения не были такими.
Это создает неприятный опыт для пользователя.
Здесь, в примере четыре, изображение имеет фиксированную ширину в процентах с высотой, установленной на авто. Это изображение реагирует на оконный браузер и обеспечивает лучший пользовательский интерфейс.
Последний пример, пример 5, показывает изображение с естественно установленными высотой и шириной. Этот пример показывает изображение таким, какое оно есть на самом деле, без добавления к нему кода стиля. Поскольку это изображение больше определенной ширины окна, оно выходит за пределы экрана в некоторых портах просмотра.
Фоновые изображения — это те изображения, которые добавляют украшения и создаются исключительно с помощью CSS (программный язык стилей). Фоновые изображения всегда помещаются в элемент-контейнер, такой как div, section или article. Фоновые изображения позволяют изображениям иметь одинаковую высоту и ширину, когда само изображение не обрезано как таковое, и это более последовательный выбор для единообразия.
Встроенные изображения имеют естественную высоту, однако контейнеру, используемому для фонового изображения, требуется дополнительная высота, чтобы он был виден на экране. Кроме того, фоновые изображения поддерживают несколько свойств CSS, которые всегда следует размещать вместе с ними. Этими тремя основными свойствами стиля являются background-size, background-position и background-repeat.
Background-size устанавливает размер фонового изображения элемента. Изображение можно оставить в естественном размере, растянуть или сузить, чтобы оно соответствовало доступному пространству. Пространства, не покрытые фоновым изображением, заполняются свойством background-color, и цвет фона будет виден за фоновыми изображениями, имеющими прозрачность.
В этом примере демонстрируется фоновое изображение с размером фона . Содержит масштабирует изображение как можно больше, не обрезая и не растягивая изображение. Здесь изображение не заполняет весь контейнер, оставляя пустое пространство, как видно по зеленому цвету фона.
Размер фона обложки максимально увеличивает изображение, не растягивая его. Если пропорции изображения отличаются от элемента, оно обрезается либо по вертикали, либо по горизонтали, чтобы не оставалось пустого места.
Размер фона, используемый в процентах, растягивает изображение в соответствующих размерах. Здесь размер фона установлен на 50%, 100%. Затем изображение растягивается до 50% ширины контейнера и 100% высоты контейнера.
Background-position устанавливает начальную позицию для каждого фонового изображения. Верхнее, нижнее, левое, правое, центральное и даже процентное соотношение могут использоваться для отображения определенной части изображения или местоположения изображения в контейнере.
В этом примере для свойства положения фона установлено значение «слева». Левый, верхний, нижний или правый — все они определяют край, на котором размещается элемент. Затем для другого размера устанавливается значение 50%, поэтому элемент помещается посередине указанного края.
Наиболее часто используемое свойство положения фона — «по центру». Центр, показанный здесь, показывает большую часть изображения во всех направлениях.
Повторение фона при использовании с фоновыми изображениями, как следует из названия, используется для определения того, где изображение должно повторяться в указанном контейнере. Для большинства фоновых изображений установлено свойство «не повторять», определяющее его один раз в контейнере. Декоративные изображения, как правило, используют повтор, чтобы показать небольшую спецификацию несколько раз поверх используемого адаптивного контейнера.
Здесь для свойства повтора фона установлено значение повторения. Изображение дублирует заполнение всего контейнера.
Фоновые изображения не без проблем. Браузеры не предоставляют вспомогательным технологиям никакой специальной информации о фоновых изображениях. Это важно, потому что в противном случае программы чтения с экрана не объявляли бы о своем присутствии и ничего не сообщали бы пользователю.
Это становится еще более сложным при обсуждении поисковой оптимизации (SEO). Например, Google индексирует только встроенные изображения. Чтобы решить эту проблему, добавление атрибута «aria-label» в качестве эквивалента тега alt с той же информацией, помещенной в тег alt, преодолевает этот барьер и обеспечивает более равноправный опыт для всех пользователей.
По возможности текст должен быть текстовым, а не встроенным в изображения. Например, использование изображений для заголовков или размещение контактной информации, такой как номера телефонов или адреса, непосредственно в изображениях не позволяет пользователям копировать и вставлять информацию; это делает информацию недоступной для программ чтения с экрана и не отвечает. Вместо этого поместите текст в свою разметку и при необходимости используйте веб-шрифты для достижения нужного стиля.
Встроенные изображения также представляют собой уникальную проблему производительности. Изображения могут сильно влиять на способность веб-страницы загружать и анализировать их.
