Как задать размер фона в html
Перейти к содержимому

Как задать размер фона в html

  • автор:

Как задать размер фона в html

В этом модуле вы узнаете, как можно стилизовать фон блоков с помощью CSS.

Перевод на русский Английский оригинал

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

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

Цвет фона¶

Одним из простейших эффектов, который можно применить к фоновому слою, является установка color. Начальное значение background-color — transparent , что позволяет видеть содержимое родительского слоя. Правильный цвет, установленный на фоновом слое, располагается за другими элементами, нарисованными на этом слое.

Фоновые изображения¶

Поверх слоя background-color можно добавить фоновое изображение, используя свойство background-image . Свойство background-image принимает следующие значения:

  • URL-адрес изображения или data URI с помощью CSS-функции url .
  • Изображение, динамически созданное градиентной CSS-функцией.

Установка фонового изображения с помощью CSS-функции url ¶

Градиентные фоны CSS¶

Существует несколько CSS-функций градиент, позволяющих генерировать фоновое изображение при передаче двух или более цветов.

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

Демонстрация примера применения фонового изображения с помощью градиентных функций:

Повторяющиеся фоновые изображения¶

По умолчанию фоновые изображения повторяются по горизонтали и вертикали, заполняя все пространство фонового слоя.

Изменить это можно с помощью свойства background-repeat с одним из следующих значений:

  • repeat : Изображение повторяется в пределах доступного пространства, обрезаясь по мере необходимости.
  • round : Изображение повторяется по горизонтали и вертикали, чтобы вместить как можно больше экземпляров в доступное пространство, не обрезая, не сжимая и не растягивая его.
  • space : Изображение повторяется по горизонтали и вертикали, чтобы вместить максимальное количество экземпляров в доступное пространство без обрезки, при необходимости расставляя экземпляры изображения. Повторяющиеся изображения касаются краев пространства, занимаемого фоновым слоем, а между ними равномерно распределяется белое пространство.

Свойство background-repeat позволяет задавать поведение для осей x и y независимо друг от друга. Первый параметр задает поведение повтора по горизонтали, а второй — по вертикали.

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

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

Значение repeat-x повторяет изображение только по горизонтали, что эквивалентно repeat no-repeat .

Приведенный ниже демонстрационный пример демонстрирует эти возможности свойства background-repeat :

Положение фона¶

Вы могли заметить, что при стилизации некоторых изображений в Web с помощью объявления background-repeat: no-repeat такие изображения отображаются слева вверху от своего контейнера.

Начальное положение фоновых изображений — верхнее левое. Свойство background-position позволяет изменить это поведение путем смещения позиции изображения.

Как и свойство background-repeat , свойство background-position позволяет позиционировать изображения по осям x и y независимо друг от друга, причем по умолчанию используется два значения.

Если используются длины и проценты CSS, то первый параметр соответствует горизонтальной оси, а второй — вертикальной.

При использовании только ключевых слов порядок следования ключевых слов не имеет значения:

background-position: left 50%; 
background-position: top left; 
background-position: left top; 

Порядок не имеет значения для ключевых слов, связанных с разными осями положения.

background-position: 50% left; 

Когда значения CSS используются вместе с ключевыми словами, порядок имеет значение. Первое значение представляет горизонтальную ось, а второе — вертикальную.

background-position: left right; 

Нельзя одновременно использовать ключевые слова, связанные с одной и той же осью.

Свойство background-position также имеет удобное сокращение до одного значения; опущенное значение преобразуется в 50% . Приведем пример, демонстрирующий это на примере ключевых слов, принимаемых свойством background-position :

Помимо стандартных двух и одного параметра, свойство background-position может принимать до четырех параметров;

При использовании трех или четырех параметров длина или процент CSS должны предшествовать ключевым словам top , left , right или bottom , чтобы браузер мог вычислить, от какого края блока CSS должно происходить смещение.

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

background-position: bottom 88% right; 
background-position: right bottom 88%; 
background-position: 88% bottom right; 

При использовании трех и более параметров перед значением длины CSS должны стоять ключевые слова top , right , bottom или left .

background-position: bottom 88% right 33%; 
background-position: right 33% bottom 88%; 
background-position: 88% 33% bottom left; 

При использовании трех и более параметров перед значением длины CSS должны стоять ключевые слова top , right , bottom или left .

Если background-position: top left 20% применяется к фоновому изображению CSS, то изображение размещается в верхней части блока, а значение 20% представляет собой 20%-ное смещение от левой части блока (по оси x).

Если к фоновому изображению CSS применяется параметр background-position: top 20% left , то значение 20% представляет собой 20%-ное смещение от верхней части блока CSS (по оси y), а изображение размещается в левой части блока.

При использовании четырех параметров два ключевых слова сопрягаются с двумя значениями, соответствующими смещению относительно начала каждого из указанных ключевых слов. Если к фоновому изображению применяется background-position: bottom 20% right 30% , то фоновое изображение позиционируется на 20% снизу и на 30% справа от блока CSS.

Это поведение демонстрируется в следующем примере:

Приведем еще несколько примеров использования свойства background-position с использованием сочетания значений CSS и ключевых слов:

Более подробно о нюансах, связанных с позиционированием фонов, можно узнать из статьи background-position на MDN.

Размер фона¶

Свойство background-size задает размер фоновых изображений; по умолчанию размер фоновых изображений определяется исходя из их собственной (реальной) ширины, высоты и соотношения сторон.

Свойство background-size использует значения длины и процента CSS или специальные ключевые слова. Свойство принимает до двух параметров, позволяющих независимо изменять ширину и высоту фона.

Свойство background-size принимает следующие ключевые слова:

  • auto : При независимом использовании размер фонового изображения определяется его собственной шириной и высотой; когда auto используется вместе с другим CSS-значением ширины (первый параметр) или высоты (второй параметр), размер, установленный в auto , изменяется по мере необходимости, чтобы сохранить естественное соотношение сторон изображения. Это поведение свойства background-size по умолчанию.
  • cover : Охватывает всю область фонового слоя. Это может означать, что изображение растягивается или обрезается.
  • contain : Размер изображения позволяет заполнить пространство без растягивания или обрезки. В результате может остаться пустое пространство, что приведет к повторению изображения, если для параметра background-repeat не установлено значение no-repeat .

Два последних параметра предназначены для самостоятельного использования без дополнительных параметров.

В следующем демонстрационном примере показаны эти ключевые слова в действии:

Демонстрация применения этих ключевых слов к background-size :

Фиксация фона¶

Свойство background-attachment позволяет изменять поведение фиксированного положения фоновых изображений (изображений, входящих в состав фонового слоя) после того, как слой становится видимым на экране.

Оно принимает 3 ключевых слова: scroll , fixed и local .

Поведением свойства background-attachment по умолчанию является начальное значение scroll . Когда требуется больше места, изображения перемещаются на это место в пределах фонового слоя, определяемого границами блока CSS.

Использование значения fixed фиксирует положение фоновых изображений относительно области просмотра.

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

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

Фоновая область¶

Свойство background-origin позволяет изменять область фона, связанную с конкретным блоком. Значения, принимаемые свойством, соответствуют областям border-box , padding-box и content-box блока.

Попробовать эти возможности можно с помощью следующей демонстрации:

Обрезка фона¶

Свойство background-clip управляет тем, что визуально видно из фонового слоя, независимо от границ, созданных свойством background-origin .

Как и в background-origin , могут быть указаны следующие области: border-box , padding-box и content-box , соответствующие местам, где может быть отрисован фоновый слой CSS. При использовании этих ключевых слов любая отрисовка фона дальше указанной области будет обрезана или вырезана.

Свойство background-clip также принимает ключевое слово text , которое обрезает фон так, чтобы он не выходил за пределы текста в блоке содержимого. Чтобы этот эффект был заметен в тексте блока CSS, текст должен быть частично или полностью прозрачным.

Это относительно новое свойство, и на момент написания статьи Chrome и большинство браузеров требуют префикс -webkit- для использования этого свойства.

Следует также отметить, что это свойство несовместимо с одновременной установкой background-clip: text для блока CSS.

Несколько фоновых слоев¶

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

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

Единственный определенный фон или последний слой обозначается браузером как финальный фоновый слой. Только этому слою разрешается назначать background-color .

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

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

1 2 3 4 5 6 7
background-image: url('https://assets.codepen.io/7518/pngaaa.com-1272986.png'), url('https://assets.codepen.io/7518/blob.svg'), linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5)); background-size: contain, cover, auto; background-repeat: no-repeat, no-repeat, no-repeat; background-position: 50% 50%, 10% 50%, 0% 0%; background-origin: padding-box, border-box, content-box; 

Короткое описание фона¶

Для облегчения стилизации фонового слоя блока, особенно если требуется несколько фоновых слоев, существует сокращение, которое выглядит следующим образом:

1 2 3 4
background: background-image> background-position> / background-size>? background-repeat> background-attachment> background-origin> background-clip> background-color>?; 

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

Порядок важен при сокращенной форме объявления нескольких фонов. Значения position и size должны быть указаны оба, разделенные косой чертой ( / ). Объявление поведения origin и clip в правильном порядке позволяет воспользоваться преимуществами установки ключевых слов, которые действительны для обоих одновременно

В следующем объявлении фон обрезается и берется из блока содержимого:

background: url('https://assets.codepen.io/7518/blob.svg') 50% 50% / contain no-repeat content-box; 

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

1 2 3 4 5 6 7
background: url('https://assets.codepen.io/7518/pngaaa.com-1272986.png') 50% 50% / contain no-repeat padding-box, url('https://assets.codepen.io/7518/blob.svg') 10% 50% / cover border-box, linear-gradient( hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box; 

Как изменить размер фоновой картинки через CSS3

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size , с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Абсолютное изменение размера

Могут применяться единицы измерения.

background-size: ширина высота;

По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

background-size: 100px 200px;

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

background-size: 100px; /* аналогично */ background-size: 100px auto;

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

background-size: 50% auto;

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain . Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

background-size: contain;

Заполнение фоном

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

background-size: cover;

Масштабирование нескольких фонов

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

background: url("sheep.png") 60% 90% no-repeat, url("sheep.png") 40% 50% no-repeat, url("sheep.png") 10% 20% no-repeat #393; background-size: 240px 210px, auto, 150px;

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

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

Как использовать CSS background-size и background-position

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

Установка

Для демонстрации фонового изображения мы будем использовать следующее изображение (Ойя на Санторини, Греция). Его естественные размеры составляют 400px на 600px .

Ойя на Санторини, Греция

Вот наша базовая демонстрация CodePen с , центрированным в середине . (Подробнее о центрировании элементов с помощью CSS Grid вы можете прочитать здесь). Размеры div составляют 300px на 200px .

У div жёлтый фон, и фоновое изображение будет располагаться над этим жёлтым фоном (поскольку фоновые цвета всегда располагаются под любым фоновым изображением).

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

Изображение ниже даёт представление о тех частях фонового изображения, которые не видны за пределами div .

Видимые и невидимые части фонового изображения

Очевидно, что это не очень удовлетворительный результат, поэтому давайте посмотрим, как свойство background-size может нам помочь.

Установка размеров фона с помощью background-size

С годами появились новые свойства для работы с фоновыми изображениями в CSS, в том числе background-size . Оно позволяет задавать размер фонового изображения, как это всегда делалось со встроенными изображениями.

Свойство background-size предлагает на выбор два ключевых значения — cover и contain , а также может принимать числовые значения с такими единицами измерения, как px , em и % , наряду с auto . Давайте рассмотрим примеры каждого из них.

background-size: contain

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

В данном примере мы добавили следующий CSS:

div  
background-size: contain;
background-repeat: no-repeat;
>

По умолчанию фоновое изображение будет повторяться столько раз, сколько необходимо для заполнения контейнера, поэтому background-repeat: no-repeat ; останавливает это поведение. (Попробуйте убрать этот параметр, чтобы увидеть повторяющееся изображение).

background-size: cover

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

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

По умолчанию левый верхний угол фонового изображения помещается в левый верхний угол div

Когда мы рассмотрим свойство background-position , мы узнаем, как указать, какая часть изображения будет видна.

background-size с другими значениями

Давайте посмотрим, какие ещё значения мы можем использовать со свойством background-size .

Если мы добавим одно процентное значение 50% , вот что произойдёт:

Фоновое изображение теперь составляет 50% ширины div , но все ещё выше div, поэтому нижняя часть изображения скрыта. Таким образом, к оси x применяется одно процентное значение. Ось y по умолчанию имеет значение auto , что означает, что изображение сохраняет естественное соотношение сторон.

Вот что произойдёт, если мы добавим два процентных значения ( 50% 50% ):

Ого! Теперь изображение занимает 50% ширины div и 50% высоты — это означает, что его соотношение сторон значительно искажено.

Мы получим похожие результаты, если заменим % на px или другие единицы измерения. Например, мы можем сделать что-то вроде background-size: 50px 50px , или background-size: 200px 3em и так далее. Мы можем поэкспериментировать с этими значениями в Pen выше… хотя этот подход редко будет полезен, потому что он будет искажать фоновое изображение, если мы тщательно не подберём значения, сохраняющие его соотношение сторон.

Гораздо более полезным для уточнения параметров фонового изображения является свойство background-position , поэтому рассмотрим его далее.

Установка положения фоновых изображений с помощью background-position

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

div  
background-position: left top; /* или 0 0 и т.д. */
>

Свойство background-position даёт нам большой контроль над тем, где будет размещено наше фоновое изображение, и оно очень хорошо работает в сочетании с background-size: cover , поэтому мы будем использовать их вместе в следующей паре примеров.

Использование background-position с ключевыми словами

На нашем примере изображения много голубого неба слева вверху, поэтому давайте вместо этого расположим его справа внизу:

div  
background-size: cover;
background-position: right bottom;
>

В дополнение к различным комбинациям верхнего, нижнего, левого и правого, существует также center , который прекрасно центрирует изображение. (Попробуйте заменить background-position: right bottom; на background-position: center; в Pen выше).

Использование background-position со значениями длины

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

div  
background-size: cover;
background-position: 20px 2em;
>

Здесь изображение задано так, чтобы покрыть контейнер, но затем оно отодвигается на 20px от левой части контейнера и на 2em от верхней.

Значения длины можно комбинировать со значениями ключевых слов. Например, bottom 20px right 2em перемещает изображение на 20px снизу и 2em справа.

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

Использование background-position с процентными значениями

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

div  
background-position: 50% 50%;
>

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

Вертикальные и горизонтальные линии через центр изображения и контейнера

Если мы установим background-position в 20% 40% , это означает, что вертикальная линия 20% слева от изображения соответствует вертикальной линии 20% слева от коробки контейнера, а горизонтальная линия 40% сверху от изображения соответствует вертикальной линии 40% сверху от коробки контейнера, как показано ниже.

background-position в 20% 40%

Заключение

Свойство background-size — действительно полезное дополнение к CSS, которое часто пригождается, особенно когда контейнеры меняют размер в отзывчивых макетах. Свойство background-position добавляет ещё больше возможностей, позволяя нам выбирать способ расположения фоновых изображений в контейнере.

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

Чтобы узнать больше, посетите страницы MDN, посвящённые этим свойствам:

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

Наконец, стоит сравнить свойства background-size и background-position для фоновых изображений со свойствами object-fit и object-position для встроенных изображений — ещё одним супер полезным дополнением к нашему набору инструментов CSS. Ознакомьтесь со статьёй Как использовать CSS object-fit и object-position , чтобы освоить их.

background-size

Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.

Примечание: Если значение этого свойства не задано в сокращённом свойстве background , которое применяется к элементу после CSS-свойства background-size , то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.

Начальное значение auto auto
Применяется к все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется нет
Проценты относительно области позиционирования фона
Обработка значения как указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation type повторяющийся список из

Синтаксис

/* Ключевые слова */ background-size: cover; background-size: contain; /* Указано одно значение - ширина изображения, */ /* высота в таком случае устанавливается в auto */ background-size: 50%; background-size: 3em; background-size: 12px; background-size: auto; /* Указаны два значения - */ /* ширина и высота соответственно */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* Значения для нескольких фонов */ /* Не путайте такую запись с background-size: auto auto */ background-size: auto, auto; background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* Глобальные значения */ background-size: inherit; background-size: initial; background-size: unset; 

Значения

Значение , которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением background-origin . Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если attachment фона является fixed , область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.

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

Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.

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

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

Предупреждение: Это поведение изменилось в Gecko 8.0. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.

Фоновые изображения, сгенерированные из элементов с использованием -moz-element() (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.

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

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

Если оба атрибута в background-size заданы и различны от auto :

Фоновое изображение отображается в указанном размере.

Если background-size содержит contain или cover :

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

Если background-size установлен как auto или auto auto :

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

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

Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

Формальный синтаксис

background-size =
#

=
[ | auto ] |
cover |
contain

=
|

Примеры

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

Замечания

Если вы указываете градиент в качестве фона и указали background-size , который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, background-size: 50% ). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.

.bar  width: 50px; height: 100px; background-image: gradient(. ); /* Лучше не использовать */ background-size: 25px; background-size: 50%; background-size: auto 50px; background-size: auto 50%; /* Допускается */ background-size: 25px 50px; background-size: 50% 50%; > 

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

Спецификации

Specification
CSS Backgrounds and Borders Module Level 3
# the-background-size

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Справочник по CSS
  • Несколько фонов
  • Масштабирование фонового изображения

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

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