Главная » 2011 » Сентябрь » 14 » Свойство background-size или управление фоном с CSS3.

В последнее время поддержка браузерами растёт, из самых популярных браузеров сейчас свойство background-size поддерживают, включая Firefox, Safari, Chrome, Internet Explorer и Opera, без необходимости простановки префиксов.

Вот очень простой пример. В первом окне, расположенном ниже, background-size был установлен на auto (значение по умолчанию), это значит, что фоновое изображение отображается в оригинальном размере. Во втором окне background-size был установлен в 275px (w) х 125px (h). В обоих случаях, для фонового изображения было установлено значение "без повторения".



Код для этого довольно прост:



Как это работает?

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

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

Синтаксис



Примеры



Давайте сначала посмотрим, как использовать в работе длину, проценты или ключевое слово auto, прежде чем перейти к рассмотрению ключевых слов contain и cover.

Задание Background-size с помощью длины, процентов или ключевого слова "auto"

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

Обратите внимание: когда используются проценты, они относятся к ширине/высоте "пространства, содержащего элемент" (то есть пространства, доступного для фона), а не к ширине/высоте самого фонового изображения.

Ключевое слово auto может быть использовано вместо любого значения, и если для background-size будет установлено только одно значение (длина/процент/auto), то это будет рассматриваться так: ширина и высота считаются равными auto.

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

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

Давайте рассмотрим несколько примеров, чтобы продемонстрировать это. Будем использовать то же изображение фона во всех примерах ниже, его оригинальные размеры 550px в ширину и 250 пикселов в высоту. Во всех примерах фоновое изображение было определено так, чтобы оно не повторялось, а следующий код предполагает, что его нужно добавить в дополнение к показанному для каждого примера коду:



Пример А

В нашем первом примере background-size был определен как «auto» для обоих значений, поэтому фоновое изображение будет показано в его первоначальных размерах 550px (w) х 250 пикселей (h).



Код для этого примера может быть выражен одним из двух способов:



или



Помните, где указывается только одно значение, второе считается 'auto'.

Пример B

В качестве второго примера, background-size определен как 200 пикселей (w) и auto (h), поэтому фоновое изображение будет показано в следующих размерах: 200px (w) и 91px (h), ширина, как указано, а высота уменьшается пропорционально ширине, с тем чтобы сохранить исходные пропорции изображения (соотношение сторон).



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



или



Пример C

Для нашего третьего примера background-size указан как auto (w) и 125px (h), поэтому фоновое изображение будет показано в следующих размерах; 275px (w) х 125px (h), высота, как указано, а ширина уменьшается пропорционально высоте, с тем чтобы сохранить исходные пропорции изображения (соотношение сторон).



Вот код:



Пример D

Для нашего четвертого примера background-size определяется как 200 пикселей (w) и 200px (h), поэтому фоновое изображение будет показано, как оно определено этими размерами; 200px (w) х 200 пикселей (h), хотя при этом оригинальные пропорции изображения (соотношение сторон) будут потеряны.



Вот код:



Пример E

Наш следующий пример для определения background-size использует проценты, в данном случае 50% (w) и auto (h), поэтому фоновое изображение будет показано в следующих размерах: 275px (w) х 125px (h), ширина изображения составляет 50% ширины содержащего его элемента (в данном случае 550px), а высота изображения уменьшается пропорционально ширине, с тем чтобы сохранить исходные пропорции изображения (соотношение сторон).



Как уже говорилось ранее в этой статье, когда второе значение auto, то это может быть выражено одним из двух способов:



или



Помните, проценты относятся к ширине/высоте "пространства, содержащего элемент" (то есть пространства, доступного для фона), а не к ширине/высоте самого фонового изображения.

Пример F

Этот пример еще раз использует проценты для определения background-size, на этот раз auto (w) и 25% (h), поэтому фоновое изображение будет показано в следующих размерах; 138px (Ш) х 63px (ч), высота изображения равна 25% высоты содержащего элемента (в данном случае 275px), а ширина изображения уменьшается пропорционально высоте, с тем чтобы сохранить исходные пропорции изображения (соотношение сторон).



Вот код:



Пример G

Для нашего последнего примера мы будем использовать и длину и проценты для определения background-size, в данном случае 80% (w) и 125px (h), поэтому фоновое изображение будет показано в следующих размерах; 440px (w) х 125px (h), ширина равна 80% от ширины содержащего элемента (в данном случае 550px), а высота 125px, как она определена.



Вот код:



Задание Background-Size помощью "contain" или "cover"

Два других возможных значения для background-size это ключевые слова contain и cover.

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

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

Давайте рассмотрим несколько примеров, во-первых, с использованием ключевого слова contain. Используем то же фоновое изображение, которое было использовано для каждого предыдущего примера, оригинальные размеры изображения в 550px (w) х 250 пикселей (h).

Пример H

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



Вот код для этого примера:



Пример I

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



Вот код для этого примера:



Пример J

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

Пример J (откроется в новом окне браузера)

Вот код для этого примера:



Пример K

Теперь давайте посмотрим на некоторые примеры использования ключевого слова cover.

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



Вот код для этого примера:



Пример L

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



Вот код для этого примера:



Пример M

Как и в примере J выше, наш третий и последний пример, использующий ключевое слово cover, можно открыть в новом окне, перейдя по ссылке ниже. Снова фоновое изображение было применено к элементу body, попробуйте изменить размеры окна браузера, чтобы увидеть, как ведет себя фоновое изображение.

Пример M (открывается в новом окне браузера)

Вот код для этого примера:



Определение Background-Size для нескольких фоновых изображений

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

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



Вот код для этого примера:



Поддержка браузерами

Поддержка браузерами свойства background-size выросла в последнее время, из самых популярных браузеров текущих версий сейчас поддерживают, собственно, включая Firefox, Safari, Chrome, Internet Explorer и Opera.

Firefox (Gecko)

Mozilla Firefox 4.0 + (Gecko 2.0 +) предлагает полную поддержку background-size свойства.

До версии 4.0, -moz-background-size была поддержка у Firefox 3.6 (Gecko 1.9.2), однако это больше не будет поддерживаться в версиях от 4,0 и далее.

Internet Explorer

Microsoft Internet Explorer 9.0 + предлагает полную поддержку background-size свойства.

До версии 9.0, Internet Explorer не поддерживал свойство background-size.

Opera

Opera 10.0 + предлагает полную поддержку background-size свойства.

До версии 10.0, -o-background-size была поддержка в Opera 9.5, однако были некоторые расхождения между реализацией Opera и спецификацией CSS3.

Safari / Chrome (WebKit)

Safari 4.1 + (WebKit 532) и Chrome 3.0 + оба предлагают полную поддержку background-size свойства.

До этих версий, Safari 3.0 + (WebKit 522) и Chrome 1.0 + и поддерживает -webkit-background-size , однако это следует более ранней версии спецификации (без поддержки ключевых слов contain и cover).

Еще почитать о свойстве background-size можно в разделе 3.9 CSS3 спецификации Backgrounds and Borders здесь.

Источник
Перевод и описание: PS-Studio.Info

Всего комментариев: 0

Оставь комментарий первым!

Имя *:
Email:
Все смайлы
Код *: