Html картинка на фон: background-image | htmlbook.ru

Разное 

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>

Созвездия в заоблачной дали
Раздумьям тщетным многих обрекли.

Одумайся, побереги рассудок —
Мудрейшие и те в тупик зашли.
Омар Хайам.

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

Домашнее задание.

  1. Создайте заголовок статьи и шесть параграфов. Подчеркните текст заголовка и выделите его цветом #9999CC.
  2. Сделайте в последнем параграфе ссылку на любой сайт и установите на странице цвет #9999CC для ссылок при наведении курсора мыши.
  3. Установите на всей странице изображение-фон.
  4. Установите для всех параграфов другую картинку в качестве фона. Но сделайте так, чтобы у первых трех параграфов цвет внешних полей (отступов) совпадал с фоном страницы, а у остальных — с фоном самих параграфов.
  5. Вставьте на страницу изображение и выровняйте его по левому краю, но так, чтобы его обтекали только последние три параграфа.
  6. Установите у изображения внешние поля по 10px снизу и справа, а также 5px слева.

Посмотреть результат → Посмотреть ответ

Изображения← Содержание →Изображения — ссылки

руководство по отложенной загрузке изображений — Дизайн на vc.

ru

Перевод материала сооснователя сервиса для оптимизации изображений ImageKit Рахула Нанвани.

53 952 просмотров

Изображения важны для каждого сайта и приложения. Невозможно представить себе сайт без рекламного баннера, изображения продукта или логотипа.

Но изображения часто много весят, и это в первую очередь влияет на размер страницы. Согласно данным сайта HTTP Archive, средний вес страницы на компьютере составляет 1511 КБ. Изображения занимают почти 650 КБ, что примерно 45% от общего числа.

Теперь важно сделать быструю загрузку страницы с изображениями. В этом материале расскажу об отложенной загрузке — методе, который поможет сократить время загрузки страницы и уменьшить её размер, не жертвуя картинками.

Основные возможности — вкратце

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

Что такое отложенная загрузка

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

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

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

Инструменты

Основная идея проста — отложить загрузку всего, что не нужно пользователю прямо сейчас. К любому изображению, которое пользователь не видит изначально, можно применить этот метод.

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

И изображения загружаются, когда становятся видимыми.

С помощью расширения Lighthouse для браузера Google Chrome можно узнать, какие изображения подходят для отложенной загрузки и сколько трафика можно сэкономить. В расширении есть раздел, посвящённый закадровым изображениям.

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

Способы реализации

Изображения на странице можно загружать двумя способами — с помощью тега <img> или с помощью CSS-свойства «background», которое позволяет установить одновременно несколько характеристик фона. Сначала рассмотрим более распространённый тег <img>, а затем перейдём к фоновым изображениям CSS.

Тег <img>

Отложенную загрузку изображений можно разделить на два этапа.

Шаг первый — предотвратить изначальную загрузку изображения. Для изображений, загруженных с помощью тега <img />, браузер использует атрибут тега «src» для запуска загрузки изображения. Не имеет значения, первое это или тысячное изображение в HTML и закадровое ли оно. Если браузер получит атрибут «src», это вызовет загрузку изображения.

Чтобы загрузить изображение через отложенную загрузку, нужно поместить URL-адрес изображения в атрибут «src». Допустим, указываем URL-адрес изображения в атрибуте «data-src» тега «image». Теперь, когда «src» пуст, браузер не начинает загрузку изображения.

Второй шаг — нужно дать установку браузеру, когда загружать изображение. Для этого устанавливаем, что как только изображение (то есть его плейсхолдер) попадает в окно просмотра, начинается загрузка. Чтобы проверить, попало ли изображение в окно просмотра, существует два способа. Рассмотрим оба с помощью рабочих примеров кода.

Загрузка изображений с помощью событий JavaScript

В этом методе используем отслеживание событий прокрутки (scroll), изменения размера (resize), смены ориентации (orientationChange) в браузере.

Когда происходит одно из этих событий, находим все изображения на странице, которые ещё не загружены. Проверяем, какие из них теперь находятся в окне просмотра. Это можно определить с помощью свойств «offset top», «scroll top» и «window height».

Если изображение вошло в окно просмотра, берём URL из атрибута «data-src» и помещаем его в атрибут «src». Это запускает загрузку изображения. Также удаляем класс «lazy», определяющий изображения, которые будут загружаться позже. После загрузки всех изображений удаляем инструменты для отслеживания событий.

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

See the Pen Lazy loading images using event handlers — example code by ImageKit.io (@imagekit_io) on CodePen.

Первые три изображения в примере загружаются заранее. URL-адрес присутствует непосредственно в атрибуте «src» вместо атрибута «data-src». Это необходимо для хорошего пользовательского опыта. Поскольку эти изображения находятся в верхней части страницы, их следует сделать видимыми как можно скорее. Мы не должны ждать события или выполнения JavaScript, чтобы загрузить их.

Загрузка изображений с помощью Intersection Observer API

Intersection Observer API — относительно новый API в браузерах. Он определяет, когда элемент входит в окно просмотра, и начинает действовать. В предыдущем методе приходилось связывать события, учитывать производительность и подсчитывать время появления элемента в окне просмотра.

Intersection Observer API делает процесс проще, помогает избежать вычислений и обеспечивает хорошую производительность.

Ниже — пример использования Intersection Observer API для отложенной загрузки изображений.

Как только API обнаруживает, что элемент вошёл в окно просмотра, используя свойство «isIntersecting», выбираем URL из атрибута «data-src» и перемещаем его в атрибут «src», чтобы запустить отложенную загрузку. Как только это будет сделано, удаляем класс «lazy» из изображения, а также удаляем оттуда обсервер.

See the Pen Lazy loading images using IntersectionObserver — example code by ImageKit.io (@imagekit_io) on CodePen.

Если вы сравните время загрузки изображения двух методов — с отслеживанием событий и Intersection Observer API, — то обнаружите, что с помощью Intersection Observer API загрузка изображения запускается гораздо быстрее, и сайт уже не смотрится «вялым» при скроллинге.

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

Однако, как и всё новое, поддержка Intersection Observer API доступна не во всех браузерах. Таким образом, приходится возвращаться к методу отслеживания событий в браузерах, где Intersection Observer API не поддерживается. Учли этот момент в приведённом выше примере.

Отложенная загрузка фоновых изображений CSS

После тегов <img /> фоновые изображения являются наиболее распространённым способом загрузки изображений для страниц. Для тегов <img /> в браузере простой подход — если URL-адрес изображения доступен, то можно его загрузить.

С фоновыми изображениями CSS не всё так просто. Чтобы загрузить фоновые изображения CSS, браузер должен создать дерево DOM (объектная модель документа), а также дерево CSSOM (объектная модель CSS), чтобы решить, применяется ли стиль CSS к узлу DOM в текущем документе.

Если правило CSS, определяющее фоновое изображение, не применяется к элементу в документе, то браузер не загружает фоновое изображение. Если применяется — загружает.

Поначалу это может показаться сложным, но такой же принцип лежит в основе техники отложенной загрузки фоновых изображений. Так мы обманываем браузер, не применяя свойство CSS «background-image» к элементу, пока этот элемент не попадёт в окно просмотра. Ниже рабочий пример отложенной загрузки фонового изображения CSS.

See the Pen Lazy Loading background images in CSS by ImageKit.io (@imagekit_io) on CodePen.

Здесь следует отметить, что код JavaScript для отложенной загрузки остаётся прежним. Мы используем Intersection Observer API, возвращаясь затем к отслеживанию событий. Хитрость заключается в CSS.

Элемент с идентификатором «bg-image» имеет заданное свойство «background-image» в CSS. Однако когда класс «lazy» добавляется к этому элементу, в CSS мы переопределяем свойство «background-image» и меняем его на значение «none».

Так как по правилам комбинация «bg-image» с «.lazy» имеет более высокое предпочтение в CSS, чем просто «bg-image», браузер применяет свойство «background-image: none» к элементу изначально.

Когда прокручиваем страницу вниз, the Intersection Observer (или отслеживание событий) определяет, что изображение находится в окне просмотра, и удаляет класс «lazy». Это изменяет применяемый сейчас CSS и применяет свойство «background-image» к элементу, начавшему загрузку фонового изображения.

Улучшить пользовательский опыт

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

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

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

1. Правильный дизайн плейсхолдеров

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

Мы использовали подобный плейсхолдер в нашем примере — везде он выкрашен в сплошной светло-серый цвет. Тем не менее можно сделать лучше. Ниже — примеры использования более удачных вариантов плейсхолдеров.

Плейсхолдер доминирующего цвета

Этот метод давно используется для результатов поиска изображений в Google и Pinterest.

Пример с Manu ninja

Может показаться, что это сложно реализовать. Но есть простой способ — сначала уменьшить изображение до пикселя 1×1, а затем масштабировать его до размера плейсхолдера — грубое приближение, но оно помогает легко получить один доминирующий цвет. Используя ImageKit, плейсхолдер доминирующего цвета можно получить с помощью цепного преобразования, как показано ниже.

Размер изображения-плейсхолдера составляет всего 661 байт, по сравнению с исходным изображением, которое имеет размер 12 700 байт — в 19 раз меньше. И это обеспечивает более приятный опыт перехода от плейсхолдера к изображению.

Рабочий пример и код для использования плейсхолдера доминирующего цвета — по ссылке.

Плейсхолдер низкого качества (LQIP)

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

Это не только выглядит лучше, но сообщает о загрузке и даёт пользователю представление о том, чего ждать в реальном изображении. Этот метод используют Facebook и Medium для изображений на сайтах и в приложениях.

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

Рабочий пример и код для использования техники LQIP — по ссылке.

2. Добавление буферного времени

Часто пользователи быстро прокручивают страницу, и для загрузки и отображения картинки на экране требуется некоторое время. Событие «load image» может сработать с задержкой, как и плейсхолдеры. Это плохо влияет на пользовательский опыт.

Решение

Вместо того чтобы загружать изображения только тогда, когда они точно входят в окно просмотра, загрузите картинки, когда они, например, в 500 px от края.

С помощью Intersection Observer API можно использовать параметр «`root`» вместе с параметром «rootMargin» (работает по стандартному принципу поля CSS), чтобы увеличить границы рамки.

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

В этом примере используется пороговое значение 500 px для загрузки изображений.

Как понятно из видео ниже (внимательно следите за сетевыми запросами, появляющимися внизу), при прокрутке, когда третье изображение находится в поле зрения, загружается пятое. Когда четвёртое изображение появляется в окне просмотра, загружается шестое.

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

Если не заметили ранее, во всех примерах третье изображение (image3.jpg) всегда загружается сразу, даже если оно находится вне области просмотра. Это было сделано в соответствии с тем же принципом: выполнить загрузку немного заранее для лучшего пользовательского опыта.

3. Как избежать смещения содержимого

При отсутствии изображения браузер не знает размеров содержимого, которое должно отображаться в пределах контейнера. Если не задать его с помощью CSS, конечный контейнер не будет иметь размеров, то есть его размеры будут равны 0 x 0 px.

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

Как показано в этом материале Smashing Magazine, смещение контента и видео — довольно неприятный опыт для пользователя.

Решение

Этого можно избежать, указав высоту и (или) ширину для конечного контейнера, чтобы браузер мог нарисовать контейнер изображения с известной высотой и шириной.

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

4. Не стоит применять отложенную загрузку для всех изображений

Ещё одна ошибка, которую часто совершают разработчики, — загружают все изображения на страницу с помощью отложенной загрузки. Это может сократить время на начальную загрузку страницы, но также приведёт к плохому пользовательскому опыту, поскольку многие изображения даже в верхней части страницы не будут отображаться до тех пор, пока JavaScript не будет выполнен.

Можно следовать общим принципам, чтобы определить, какие изображения должны быть загружены после.

  • Любое изображение, которое присутствует в окне просмотра или в начале страницы, не должно загружаться с помощью отложенной загрузки. Это касается любого изображения-заголовка, рекламных баннеров, логотипов. Пользователь должен видеть их, как только страница загрузится. Помните, что мобильные и десктопные устройства будут иметь разные размеры экрана и, следовательно, разное количество изображений, которые будут видны на экране изначально. Таким образом, необходимо учитывать тип устройства, чтобы решить, какие изображения загружать изначально, а какие нет.
  • Любое изображение, которое частично видно в окне просмотра, не должно загружаться с помощью отложенной загрузки. Это происходит по принципу, который обсуждался выше, — загружать чуть заранее. Любое изображение, находящееся, допустим, в 500 px от области просмотра, может быть загружено заранее.
  • Если страница не длинная, её можно пролистать за несколько движений. Или если за пределами окна просмотра меньше пяти изображений, то отложенную загрузку можно не использовать. Это не принесёт существенной выгоды пользователю с точки зрения производительности. Дополнительный JavaScript, который вы загружаете на страницу, чтобы включить отложенную загрузку, компенсирует выигрыш от отложенной загрузки такого небольшого количества изображений.

Популярные JavaScript-библиотеки

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

  • yall.js (Yet Another Lazy Loader) — использует Intersection Observer API и возвращается к отложенной загрузке на основе событий. Поддерживает все основные типы элементов HTML, но не «background-image». Также работает на Internet Explorer 11 и старших версиях.
  • lazysizes — библиотека с обширной функциональностью. Поддерживает адаптивные изображения «srcset» и атрибут «sizes». Высокая эффективность даже без Intersection Observer API.
  • jQuery Lazy — простая, основанная на jQuery, библиотека отложенной загрузки.
  • WeltPixel Lazy Loading Enhanced — расширение для Magento 2 для отложенной загрузки изображений.
  • Magento Lazy Image Loader — расширение для Magento 1.x для отложенной загрузки изображений.
  • Shopify Lazy Image Plugin — расширение для Shopify для отложенной загрузки изображений. Платная.
  • WordPress A3 Lazy Load — плагин отложенной загрузки изображений для WordPress.

Как проверить, всё ли работает

Самый простой способ — открыть инструменты разработчика в браузере Chrome. Перейдите на вкладку «Сеть» → «Изображения». Здесь при первом обновлении страницы должны загружаться только те изображения, которые должны присутствовать на странице изначально.

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

Другой способ — запустить расширение Lighthouse от Google Chrome на странице после внесения изменений и найти предложения в разделе Offscreen images.

Если не работает

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

Или можно использовать тег <noscript>, чтобы создать удобный интерфейс для этих пользователей. В треде Stack Overflow рассматриваются проблемы этого тега. Материал будет полезен для всех, чья целевая аудитория — такие пользователи.

Все, что вам нужно знать о background-position

Преобразование одного из моих ответов Stack Overflow в сообщение

Содержание

  • Значения пикселей
  • Процентные значения
    • Как насчет градиентов?
  • Подробнее
    • Отрицательные значения (< 0%)
    • Большие значения (> 100%)
    • Особые случаи
  • Соотношение между пикселями и процентными значениями
  • Изменение ссылки
  • Объединение значений пикселей и процентов
  • Использование фона-происхождения
  • Заставить процент вести себя как пиксель

При работе с background-position мы имеем две типичные ситуации:

  1. Мы используем значение пикселя (тривиальное)
  2. Мы используем процентное значение (хитрое)

Давайте начнем подробное объяснение и уберем всю двусмысленность вокруг background-position !

Пиксельные значения

При использовании значений в пикселях эталоном является верхний/левый угол изображения независимо от его размера. Это похоже на использование top/left с позиционированным элементом:

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

Процентные значения

При использовании процентных значений ссылка отличается от при использовании значений в пикселях; это больше не верхний/левый угол:

В этом случае нам нужно учитывать два параметра: размер контейнера И размер изображения. Вот иллюстрация того, как это работает (я взял background-position равным 30% 30% ):

Сначала мы рассмотрим изображение, чтобы найти опорную точку, которую мы будем использовать для размещения изображения. это пункт внутри изображения , расположенного на 30% 30% от верхнего/левого угла, учитывая размер изображения (как указано зелеными линиями). Затем мы помещаем эту точку внутрь контейнера на 30% 30% от верхнего/левого угла, учитывая размер контейнера .

Исходя из этой логики, мы можем идентифицировать некоторые тривиальные случаи, такие как

          50% 50% (в центре)            100% 100% (внизу справа) 100% 0% (вверху справа)

Вот полный список общих значений и их эквивалентность:

  • Полево = Слева Центр = Центр. осталось = 0 50%
  • справа = справа по центру = по центру справа = 100% 50%
  • верх = верх центр = центр верх = 50% 0
  • низ = низ центр = центр низ = 50% 100%
  • центр = центр центр = 50% 50%
  • вверху слева = слева вверху = 0% 0%
  • вверху справа = справа вверху = 100% 0
  • внизу слева = слева внизу = 0 100%
  • внизу справа = справа внизу = 100% 100%

Теперь понятно, что если размер изображения равен размеру контейнера, то при использовании процентных значений ничего не произойдет просто потому, что все позиции эквивалентны. Верхнее/левое изображение уже в верхнем/левом ( 0% 0% ) контейнера, центр уже в центре ( 50% 50% ) и т.д.

🏆 Первое золото правило при использовании процентных значений: размер образа должен отличаться от размера контейнера

А градиенты?

Приведенная выше логика аналогична при применении к градиентам, поскольку градиенты считаются изображениями, и по умолчанию, если вы не укажете background-size , размер градиента будет размером его контейнера , в отличие от случая, когда с помощью изображения. Это основная проблема, с которой сталкивается каждый разработчик при работе с градиентами.

Если мы обратимся к спецификации background-size , мы можем увидеть, как возникает проблема:

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

И

содержат

Масштабирование изображения с сохранением собственного соотношения сторон (если есть) до наибольшего размера, чтобы его ширина и высота могли поместиться в области позиционирования фона.

А также:

Растровое изображение (такое как JPG) всегда имеет внутренние размеры и пропорции.

CSS <градиент> s не имеют внутренних размеров или внутренних пропорций ref

Изображение всегда имеет внутренние значения, поэтому в большинстве случаев оно не будет иметь тот же размер, что и его контейнер, поэтому background-position с процентами будет иметь эффект. Градиенты не имеют внутренних значений, поэтому размеры градиента будут равны размеру его контейнера, а background-position с процентными значениями никогда не будет работать, если мы не укажем background-size , отличный от размеров его контейнера.

🏆 Второе золотое правило при использовании значений вероятности: при использовании градиента всегда определяйте размер фона

Подробнее

В приведенных выше примерах мы видели, как background-size работает при использовании значений между 0% и 100% , но как насчет использования отрицательных значений или значений больше 100% ? Логика та же, но найти точку отсчета будет сложнее.

Отрицательные значения (

< 0%)

Предположим, мы хотим разместить фон по адресу -50% 0 . В этом случае контрольная точка будет находиться за пределами изображения. Вот пример: https://jsfiddle.net/no87qv2r/4/

Как видно из рисунка, мы сначала рассматриваем -50% изображения, то есть -50 пикселей , чтобы определить нашу контрольную точку (т. е. -50 пикселей от левого края изображения). ). Затем мы помещаем эту точку на -50% , учитывая размер контейнера ( -100px от левого края контейнера). Затем мы рисуем изображение, и мы получаем вышеуказанный результат. Видно только 100px изображения.

Мы также можем заметить, что отрицательные процентные значения будут вести себя так же, как отрицательные фиксированные значения, когда размер изображения равен 9.0084 меньше , чем размер контейнера (оба сместят изображение влево). В этом случае -50% 0 совпадает с -50px 0 (https://jsfiddle.net/no87qv2r/5/).

Если, например, мы увеличим размер изображения до 150px 150px , -50% 0 будет таким же, как -25px 0 .

Когда мы делаем размер больше контейнера, отрицательные значения начнут смещать изображение вправо (как и при положительных значениях пикселей), что логично, поскольку 50% изображения увеличится, а 50% контейнера останется прежним.

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

То же самое логически произойдет и с градиентами:

Обратите внимание на использование следующего синтаксиса

background:linear-gradient(to right,red,blue) -50% 0/50px 150px no-repeat

что означает

background:[изображение или градиент] [позиция фона]/[размер фона] без повторов

Большие значения (> 100%)

Та же логика, что и раньше: если мы определяем фон в 150% 0 , то мы считаем нашу опорную точку 150% от левого края (или 50% от правого края), затем размещаем ее 150% от левого края контейнера: https://jsfiddle.net/no87qv2r/9/ (в данном примере 150% 0 эквивалентно 150px 0 )

Если мы начнем увеличивать размер фона , мы получим такое же поведение, как показано ранее:

Особые случаи

Использование значений вне диапазона [0% 100%] позволяет нам скрыть фоновое изображение, но как нам найти точные значения, чтобы полностью скрыть изображение?

Рассмотрим следующую иллюстрацию:

Наше изображение имеет ширину Ws и контейнер шириной Wp и нам нужно найти значение p . Из рисунка можно получить следующую формулу:

p * Wp = p * Ws + Ws <=> p = Ws/(Wp - Ws) с p в [0,1]

Если размер контейнера 200px , а изображение 100px , тогда p равно 1 , поэтому 100% (конечно, мы добавляем знак минус, и это -100% ).

Мы можем сделать это более общим, если рассмотрим процентные значения с background-size вместо фиксированных значений. Предположим, что размер фона равен S% . Тогда у нас будет

Ws = Wp * s (s в [0,1] и S=s*100)

Первая формула будет:

p = Ws/(Wp - Ws) <= > p = s / (1 - s)

Добавляем знак минус и получаем p = s / (s - 1)

Теперь, если мы хотим скрыть изображение с правой стороны, мы делаем та же логика справа (мы рассматриваем зеркало предыдущей иллюстрации), но поскольку мы всегда будем рассматривать левый край, чтобы найти процент, который нам нужно добавить 100% .

Мы определяем p'% равным 100% + p% , и формула будет

p' = 1 + p <=> p' = 1 + s / (1 - s ) = 1 / (1 - s)

Вот анимация, иллюстрирующая приведенный выше расчет:

Давайте вычислим некоторые значения:

Когда s=0,5 , у нас есть background-size равный 50 % , а процентные значения будут от -100% до 200% . В этом случае мы начали с отрицательного значения и закончили с положительным, потому что размер изображения меньше размера контейнера. Если мы рассмотрим последний случай ( s=2 ), то background-size равен 200% , а процентные значения будут от 200% до -100% . Мы начали с положительного значения и закончили отрицательным, потому что размер изображения больше размера контейнера.

🏆 У нас есть третье золотое правило: для смещения изображения влево нам нужны отрицательные значения, если размер меньше размера контейнера, но нам нужны положительные значения, если размер больше размера контейнера (то же самое для правого) .

Соотношение между пикселями и процентными значениями

Давайте определим способ вычисления процентных значений на основе значений пикселей или наоборот (т. е. формулу для преобразования между ними). Для этого нам просто нужно рассмотреть опорные точки.

При использовании значений пикселей мы будем учитывать синие линии, и у нас будет background-position:X Y .

При использовании процентных значений мы будем учитывать зеленые линии, и у нас будет background-position:Px Py .

Формула будет следующей: X + Px * Ws = Px * Wp , где Ws — ширина изображения, а Wp — ширина контейнера (та же формула для оси Y с учетом высоты ).

У нас будет X = Px * (Wp - Ws) . Используя эту формулу, мы можем подтвердить объясненные ранее золотые правила:

  • Когда Wp = Ws , формула больше недействительна, что подтверждает, что процентные значения не действуют, когда размер изображения совпадает с размером контейнера; таким образом, нет никакой связи между значениями пикселей и процентами.
  • X и Px будут иметь одинаковый знак, когда Wp > Ws , и противоположный знак, когда Wp < Ws . Это подтверждает, что процентные значения ведут себя по-разному в зависимости от размера изображения. Мы также можем выразить формулу по-другому, если рассмотрим процентные значения background-size . У нас будет X = Px * Wp * (1 - s) .

Вот анимация, иллюстрирующая приведенный выше расчет:

Изменение ссылки

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

По умолчанию background-position: X Y эквивалентно background-position: left X top Y (положение по X слева и по Y сверху). Регулируя сверху и/или слева , мы меняем ссылку и способ размещения изображения.

Вот несколько примеров:

Понятно, что со значением X мы можем использовать только слева и справа (горизонтальное положение), а со значением Y значение мы можем использовать только нижнее и верхнее (вертикальное положение). Со всеми различными комбинациями мы логически получаем 4 разных угла.

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

Вот новая версия:

Для s=0.5 мы больше не будем анимировать от -100% до 200% НО это будет от слева -100% до справа -1003% .

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

Было бы сложно добиться той же анимации, сохраняя ту же ссылку.

🏆 Еще одно золотое правило: если вы хотите иметь симметричную анимацию, сделайте свою логику на одной стороне и используйте то же самое на другой стороне, изменив ссылку .

Объединение значений пикселей и процентов

Мы можем использовать calc() для выполнения сложных вычислений, в которых участвуют разные единицы измерения. Например, мы можем написать width:calc(100px + 20% + 12em) , и браузер рассчитает вычисленное значение с учетом того, как работает каждая единица, и мы закончим значением в пикселях (для этого случая).

Как насчет background-position ? Если мы напишем calc(50% + 50px) , будет ли это оцениваться как значение в процентах или значение в пикселях? будет ли значение пикселя преобразовано в проценты или наоборот?

Результат не будет преобразован в значение в пикселях или в процентное значение, а будет использоваться вместе. background-position имеет особое поведение при смешивании процентных значений и значений пикселей внутри calc() , и логика следующая:

  1. Сначала мы используем процентное значение для позиционирования изображения, применяя всю логику, связанную с процентными значениями.
  2. Мы рассматриваем положение (1) в качестве эталона и используем значение пикселя для повторного позиционирования изображения, применяя всю логику, связанную со значениями пикселей.

Выполнение calc(50% + 50px) означает: центрировать изображение, затем сдвинуть его на 50px влево.

Эта функция может упростить многие вычисления. Вот пример:

Было бы утомительно находить правильные значения в процентах или пикселях для размещения 4 красных квадратов, как показано выше, но путем смешивания обоих с помощью calc() это довольно легко.

Теперь предположим, что у нас есть что-то вроде этого: calc(10% + 20px + 30% + -10px + 10% + 20px) . Как браузер отреагирует на это?

В таких случаях браузер сначала оценит каждую единицу, чтобы получить упрощенную форму calc(X% + Ypx) , а затем применит описанную выше логику для позиционирования изображения. 

 расчет (10% + 20 пикселей + 30% + -10 пикселей + 10% + 20 пикселей)
вычислить((10% + 30% + 10%) + (20px + -10px + 20px))
расчет(50% + 30px)
Войти в полноэкранный режимВыйти из полноэкранного режима

Пример: https://jsfiddle. net/no87qv2r/17/

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

Здесь больше эквивалентных значений, если учесть calc() :

  • слева X сверху Y = X Y
  • справа X сверху Y = вычисл(100% - X) Y
  • слева X снизу Y = X вычисл(100% - Y)
  • справа X снизу Y = вычисл(100% - X) вычисл(100% - Y)

X и Y - это значения пикселей , а не проценты!

Использование фона-происхождения

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

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

Вот наглядный пример:

Понятно, что когда у нас нет padding content-box эквивалентно padding-box , когда у нас нет рамки border-box эквивалентно padding-box , и без заполнение и отсутствие границы, все 3 эквивалентны.

Важно отметить, что это свойство влияет на background-size при использовании с процентными значениями.

У нас также есть свойство background-clip , но оно не влияет на расчет. Это влияет только на визуальный результат, обрезая часть фона.

Заставить проценты вести себя как пиксели

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

Использование псевдоэлемента в качестве фонового слоя

Следует отметить, что translate учитывает размер псевдоэлемента, но, поскольку он такой же, как контейнер, у нас не возникнет никаких проблем. Мы также можем использовать слева / сверху , но преобразование будет иметь лучшую производительность. Используя этот метод, мы не можем иметь повторения.

Использование фона-происхождения

Хитрость заключается в том, чтобы иметь некоторые отступы, ограничить источник до content-box и сделать размер больше, чем 100% , чтобы покрыть отступы и чтобы изображение снова заполнило контейнер.

В приведенном выше отступе я сделал отступ равным половине размера, поэтому по логике мне нужно использовать 200% в background-size исправить. Для background-position теперь легко найти необходимое значение на основе предыдущего объяснения.

Другой пример:

Используя этот метод, мы можем иметь повторение, но поскольку мы добавляем отступы, мы не сможем добавить содержимое. Чтобы преодолеть это, мы можем объединить оба метода, чтобы получить следующее:

Вот и все!

Теперь у background-position больше нет секретов для вас. 👌

Хочешь меня поддержать?

ИЛИ

HTML Bulletproof Фоновые изображения в сообщениях электронной почты

Включает все исправления для фоновых изображений, охватывающие учетную запись Outlook, Windows 10, Webkit и Gmail, отличную от учетной записи Gmail (GANGA).

В Action Rocket мы всегда в курсе всех последних взломов и исправлений, чтобы наши клиенты получали самые лучшие электронные письма. Фоновые изображения могут создать отличные эффекты в дизайне электронной почты и действительно оживить его.

Однако они вызывают некоторые головные боли — Outlook 2007, 2010, 2013 нуждаются в языке векторной разметки (VML) для правильного отображения изображения, поскольку они используют механизм рендеринга Microsoft Word. Windows 10 также имеет аналогичные особенности, но требует даже больше информации, чем более ранние версии, в основном ширина и высота указываются в точках (pt), а не в пикселях. Электронная почта Webkit и подавляющее большинство современных почтовых клиентов могут использовать обычный фон CSS или html, и совсем недавно Джастин Ху из freshinbox обнаружил, что другой почтовый клиент, который до последнего месяца или около того не поддерживал фоновые изображения, приложение Gmail не поддерживает Учетные записи Gmail, исправление для этого было свойством фона css, но со значениями свойств, установленными в сокращении.

Ознакомьтесь со всем приведенным ниже кодом — в нем охвачены все экземпляры, где теперь поддерживаются фоновые изображения:







placeholder.com/640×400" />









CONTENT









Разбивка


Начнем с таблицы и строки таблицы — мы настроим электронную почту так, чтобы она работала во всех проекциях. Здесь нет ничего нового.

Во-первых, background: url(‘image.png’) ссылается на изображение, которое является повторением изображения выше, указанного в html. Затем следует положение изображения — центр / размер — обложка, должно ли изображение повторяться — без повторов и, наконец, цвет фона #000000; Все они настроены для централизации фонового изображения, которое достаточно велико, чтобы покрыть контент и не требует повторения.

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

После

 запускаем VML:





Открывающие и закрывающие условные комментарии MSO гарантируют, что VML применяется только к тем версиям Outlook, которые в нем нуждаются. VML За которым следует v:image, определяющий изображение в VML.

placeholder.com/640×400" />

Мы определяем пространство имен xml xmlns:v=”urn:schemas-microsoft-com:vml”, затем мы определяем значения свойства v:image, заполнение используется для определения атрибутов, кроме сплошного цвета или изображения используется. fill="true" указывает, что изображение vml заполнит всю фигуру. Обводка используется для определения того, используется ли линия или граница, в случае фонового изображения это не так, поэтому для этого параметра установлено значение stroke="false". Затем за этими атрибутами VML следует тег стиля, который, что наиболее важно, содержит размеры изображения в виде точек, чтобы получить правильное число, умножив пиксели на 0,75, например. 640 пикселей x 0,75 = 480 пикселей. И последнее, но не менее важное: изображение src.

Основное отличие — это position:absolute; чтобы разместить прямоугольник там, где он нам нужен.

Следующим в VML является v:fill для установки цвета и непрозрачности v:rect и v:image – этот цвет нужен задавать так же, как в bgcolor и background:color; чтобы он был одинаковым для всех клиентов.

Наконец, мы определяем положение v:textbox, чтобы показать, что мы будем помещать что-то поверх вышеуказанных v:rect и v:image с позицией, начинающейся с верхний левый на 0,0,0,0.

После VML — открываем

, содержащий изображение и vml. Затем следует
, чтобы остановить появление пробела в 20 пикселей после изображения в Outlook.

Поскольку последним тегом таблицы html, который мы использовали, был

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





CONTENT

Затем следуют закрывающие теги для всего вышеперечисленного, включая теги VML, закрытые условным тегом MSO.

No related posts.

Автор записи

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

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