background | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Пример
- Спецификация
- Браузеры
Универсальное свойство background позволяет установить одновременно несколько характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.
| Значение по умолчанию | transparent || none || repeat || scroll || 0% 0% |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
background: [<фон>, ]* <последний_фон>
Здесь:
<фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip
<последний_фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip || background-color
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Любые комбинации значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background</title> <style> div { height: 200px; /* Высота блока */ width: 200px; /* Ширина блока */ overflow: auto; /* Добавляем полосы прокрутки */ padding-left: 15px; /* Отступ от текста слева */ background: url(/example/image/hand.png) repeat-y #fc0; /* Цвет фона, путь к фоновому изображению и повторение фона по вертикали */ } </style> </head> <body> <div>Великобритания, куда входят Пик-Дистрикт, Сноудония и другие многочисленные национальные резерваты природы и парки, неумеренно применяет культурный рельеф.
Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background</title> <style> body { background: url(/example/image/hand.png) repeat-y, url(/example/image/bg-right.png) repeat-y 100% 0, #fc0; } </style> </head> <body> </body> </html>Объектная модель
Объект.style.background
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация |
CSS Level 2 Revision 1 (CSS 2. 1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| один фон | 4 | 12 | 1 | 3.5 | 1 | 1 |
| несколько фонов | 9 | 12 | 1 | 10.5 | 1.3 | 3.6 |
| один фон | 2.1 | 1 | 10 | 3.2 |
| несколько фонов | 2.1 | 1 | 10 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Цвет и фон
См. также
- background-attachment
- background-clip
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- Линейный градиент
- Несколько фоновых картинок
- Спрайты
- Установка фона и градиента
- Фоновая картинка
Рецепты
- Как вместо символа маркера использовать картинку?
- Как добавить две фоновые картинки к одному элементу?
- Как добавить рисунок к внешним ссылкам?
- Как изменить цвет кнопки?
- Как изменить цвет ссылки при наведении?
- Как размыть фоновую картинку?
- Как указать язык сайта по ссылке?
Практика
- Атрибут style
- Полупрозрачный фон
- Сокращённое значение цвета
- Фоновая картинка
- Цвет в RGB
- Цвет фона таблицы
- Цвет фона у ссылок
- Шестнадцатеричный цвет
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 18.
03.2018
Редакторы: Влад Мержевич
background — CSS — Дока
- Кратко
- Пример
- Как пишется
- Подсказки
Кратко
Секция статьи «Кратко»Шорткат, позволяющий задать все свойства фона разом. Объединяет в себе:
background;- attachment background;- clip background;- color background;- image background;- position background;- repeat background.- size
Пример
Секция статьи «Пример»Код ниже задаёт чёрную заливку фона, фоновую картинку bkg.png, которая не будет повторяться, будет расположена по центру по вертикали и горизонтали, а также закроет всю площадь родителя.
div { background: #000000 url("bkg. png") no-repeat center / cover;}
div {
background: #000000 url("bkg.png") no-repeat center / cover;
}
png") no-repeat center / cover;}
Как пишется
Секция статьи «Как пишется»Можно указать одно или несколько значений для разных свойств, разделяя их пробелами. Значения можно писать в любом порядке, браузер сам определит, какое значение к какому свойству относится.
⚠️
В произвольном порядке записи свойств есть исключение: в паре position порядок записи только такой, через слэш. А ещё, если опустить size, то position сработает, но если опустить position, то size не сработает.
div { /* Сработает */ background: url("bkg.png") center / cover; /* Сработает */ background: url("bkg.png") center; /* Не сработает */ background: url("bkg.png") cover;}
div {
/* Сработает */
background: url("bkg.png") center / cover;
/* Сработает */
background: url("bkg. png") center;
/* Не сработает */
background: url("bkg.png") cover;
}
png") center;
/* Не сработает */
background: url("bkg.png") cover;
}
Лучше не полагаться слишком на это поведение и использовать полные записи: background и background.
Ни одно из значений не является обязательным, поэтому ненужные можно смело опустить.
Подсказки
Секция статьи «Подсказки»💡 Как и с любым шорткатом, со свойством background нужно обращаться осторожно. Если потребуется переопределить всего одно из заданных значений, то нужно будет переписать и все остальные.
💡 Если в рамках шортката не задано значение для какого-то из свойств и в коде ниже оно не прописано, то свойству устанавливается значение по умолчанию.
💡 Записанные выше отдельные свойства переопределяются заданным ниже свойством background.
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так.
Попробуйте ещё раз?
←
backface
alt + ←
→
background
alt + →
Все, что вам нужно знать о background-position
Преобразование одного из моих ответов Stack Overflow в сообщение
Содержание
- Значения пикселей
- Процентные значения
- Как насчет градиентов?
- Подробнее
- Отрицательные значения (< 0%)
- Большие значения (> 100%)
- Особые случаи
- Соотношение между пикселями и процентными значениями
- Изменение ссылки
- Объединение значений пикселей и процентов
- Использование фона-происхождения
- Заставить процент вести себя как пиксель
При работе с background-position мы имеем две типичные ситуации:
- Мы используем значение пикселя (тривиальное)
- Мы используем процентное значение (хитрое)
Давайте начнем подробное объяснение и уберем всю двусмысленность вокруг 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) в качестве эталона и используем значение пикселя для повторного позиционирования изображения, применяя всю логику, связанную со значениями пикселей.
Выполнение 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 больше нет секретов для вас.
👌
Как и когда встраивать изображения URL-адресов данных в файлы CSS
Как и когда встраивать изображения URL-адресов данных в файлы CSS
14 августа 2016 г.
CSS предлагает большую гибкость для веб-разработчиков и может использоваться по-разному. Свойство background-image может быть особенно полезным при работе с изображениями, которые должны отображаться как наложения (через DIV ). Я использую это в своем плагине jQuery PhotoBoxr, однако вместо использования изображений я указываю данные изображения непосредственно в моем Файл CSS как URL-адрес данных .
Понять, как это делается, довольно просто, и я расскажу об этом в первую очередь.
Существуют онлайн-инструменты, которые преобразуют файл изображения в URL-адрес данных .
Я использовал этот. Он производит что-то похожее на это...
Имея это в виду, ваш CSS меняется с...
... на это (сокращенно для наглядности):
По сути, вы берете 'данные:' и поместите ее в функцию url() . Конечным результатом является ваш CSS , а изображения объединены в один файл. Это означает, что браузер запрашивает один файл с вашего сервера, что теоретически было бы более оптимальным, но есть уловки.
Основная загвоздка - размер файла. Изменив изображение на Data URL , общий размер изображения увеличится. Для маленьких изображений это не проблема, но для больших изображений это начинает становиться заметным. Еще одна загвоздка в том, что некоторые браузеры имеют ограничение на размер 9.0004 URL-адрес данных (32 КБ), хотя вы никогда не должны этого делать, если ваши изображения в любом случае приближаются к этому размеру.
Подробнее плюсы и минусы обсуждаются здесь.
Итак, после прочтения всех плюсов и минусов, , когда следует использовать CSS со встроенными Data URL изображениями? Ответ немного нечеткий, но в качестве ориентира можно использовать следующий контрольный список:
- Исходные изображения довольно маленькие ()
- Невозможно объединить файлы изображений с КСС
- Одно и то же изображение не используется несколько раз, т. е. один тег background-image на каждый URL-адрес данных
- Наличие одного файла CSS чище, например. при распространении вашего кода, и ваш код имеет небольшое количество CSS и использование изображений
- Кэширование CSS и изображений вместе допустимо
е. один тег background-image на каждый URL-адрес данных В моем случае все вышеперечисленное было верно, поэтому я выбрал комбинированный подход CSS+Image file. Однако в моем случае основной причиной был тот факт, что я не хотел, чтобы пользователи моего плагина загружали все дополнительные файлы изображений, прежде чем начать использовать плагин, т.е. это было чище.
Поскольку мой плагин использует всего несколько изображений и немного CSS , имеет смысл объединить их вместе. То же самое может не относиться к другим проектам. Я видел увеличение общего размера файла на 2 КБ на , но я думаю, что это стоит того, чтобы иметь только один файл.
С другой стороны, если ваш CSS повторно использует одно и то же изображение несколько раз или у вас есть большие изображения, этот подход не следует использовать.