background-image · Темы GitHub · GitHub
Вот 184 публичных репозитория соответствует этой теме…
дкерн / jquery.ленивый
Звезда 1ксдры / герой-генератор
Спонсор Звезда 623рррор / pygame-меню
Звезда 412тимхагн / Гэтсби-фоновое изображение
Звезда 262леннарт-рт / Живые-Земля-Обои
Звезда 184Ютенджун / укиё-дзё
Звезда 127 уайтлок
/
ldbm-изображение-удаление фона
Звезда
85юаньгуандун / смарт-фон
Звезда 76Диеговерсиани / гладкий параллакс
Звезда 65майнеяо / гсбг
Звезда 61codeestX / ECardFlow
Звезда 46СуперОл3г / postcss-изображение-набор-polyfill
Звезда 44ловкость / холст-изображение-обложка-позиция
Звезда 38луисфб01 / итеративный захват
Спонсор Звезда 34адумревал / изображениеРогов
Звезда 33нидоркс / alexrodin.
info Звезда
29эугениосегала / easy_background
Звезда 28шэньцихуэй / taro_scaffold
Звезда 24Рундес Балли / php-шум
Звезда 22джпого / avif-webp-css-поддержка
Улучшить эту страницу
Добавьте описание, изображение и ссылки на изображение на заднем плане страницу темы, чтобы разработчикам было легче узнать о ней.
Курировать эту тему
Добавьте эту тему в свой репозиторий
Чтобы связать ваш репозиторий с
изображение на заднем плане
тему, перейдите на целевую страницу репозитория и выберите «управление темами».
Учить больше
Монетный двор разработки: встроенные изображения и фоновые изображения
Изображения повышают ценность веб-страницы, дополняя ее как визуально, так и эстетически. Изображения обеспечивают ценность, информацию и украшение. Изображения также бывают разных типов с точки зрения разработки. Существует два основных типа изображений, которые пользователи фактически видят на веб-страницах: встроенные изображения и фоновые изображения. Оба предоставляют большие возможности для передачи информации аудитории, и каждый сталкивается с уникальными проблемами, чтобы обеспечить высочайшее качество веб-разработки.
Встроенные изображения — это то, о чем думают пользователи, когда видят изображение. Это изображения, отображаемые целиком по сравнению с фоновыми изображениями. Встроенные изображения — это изображения, которые передают пользователю ценность и информацию. Встроенные изображения поддерживают самые разные типы файлов: от 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, преодолевает этот барьер и обеспечивает более равноправный опыт для всех пользователей.
По возможности текст должен быть текстовым, а не встроенным в изображения. Например, использование изображений для заголовков или размещение контактной информации, такой как номера телефонов или адреса, непосредственно в изображениях не позволяет пользователям копировать и вставлять информацию; это делает информацию недоступной для программ чтения с экрана и не отвечает.
Вместо этого поместите текст в свою разметку и при необходимости используйте веб-шрифты для достижения нужного стиля.
Встроенные изображения также представляют собой уникальную проблему производительности. Изображения могут сильно влиять на способность веб-страницы загружать и анализировать их. В последнее время большинство браузеров начали поддерживать атрибут loading=»lazy» для ленивой загрузки встроенных изображений. Это позволяет загружать изображения в режиме реального времени, когда пользователь достигает их на экране, а не при первой загрузке веб-страницы. Фоновые изображения не имеют такого же атрибута, поэтому большое количество изображений, оформленных в виде фоновых изображений, может вызвать проблемы с производительностью.
Недавно команда разработчиков NJI Media написала сценарий для кодирования изображений, чтобы они соответствовали самым высоким стандартам современной веб-разработки. Эта функция гарантирует, что все встроенные изображения содержат теперь поддерживаемый атрибут loading=»lazy» для повышения производительности веб-сайта.