CSS3 Анонсы Backgrounds

background-origin

Background-origin свойство, которое используется для определения того, как background-position фона рассчитывается в определенном блоке.

Он принимает три различных значения border-box, padding-box and content-box. Когда вы указываете значение padding-box, позиция определяется  по отношению к верхнему левому углу отступа края. С border-box это относительно верхнего левого угла границы, и в  content-box  фон начинается с верхнего левого угла содержания. 

 

background-clip

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

Вот 2 - 3 примера, первый ряд с background-clip установленным с border-box, во втором ряду он настроен на padding-box и, следовательно, 3ий ряд с настройкой content-box.

 

 

background-size

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

Значением свойства background-size является одна или две (разделенных пробелом) величины. Если указано две величины, то первая отвечает за ширину, вторая — за высоту изображения. Если указана только одна, то она отвечает за ширину, а значение высоты считается равной auto.
Проценты — значения в процентах (%), где за 100% берется ширина или высота элемента. Отрицательные значения (-20%) указывать нельзя.
Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них тоже недопустимы отрицательные значения.
auto — Автоматическое вычисление размеров. Если указано две величины (auto auto) или одна (auto), то изображение отображается в свою натуральную величину. Если одна из величин это Проценты или Размеры, а другая auto, то размер высчитывается исходя из пропорций изображения (масштабируется).
contain — масштабирование изображения таким образом, чтобы оно полностью помещалось внутри элемента и при этом прилегало как минимум к двум его противоположным сторонам.
cover — масштабирование изображения таким образом, чтобы оно полностью заполнило элемент, но при этом как минимум к двум его противоположным сторонам оно должно только прилегать. К двум оставшимся сторонам оно тоже может прилегать (если пропорции изображения и элемента совпадают), либо быть обрезанным (если не совпадают).

 

 

Синтаксис

background-size: [проценты | размеры | auto] || [проценты | размеры | auto] | contain | cover

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS свойство background-size</title>
<style type="text/css">
div {
background: url('images/key.jpg') no-repeat; /* адрес картинки
и запрет на повторение */
border: #cc3333 1px solid; /* стиль рамки */
width: 150px; /* ширина блоков DIV */
height: 100px; /* высота */
margin: 5px; /* размер внешних полей */
}
.div2 {
background-size: 2cm 70px; /* размер фоновой картинки */
}
.div3 {
background-size: contain;
}
.div4 {
background-size: cover;
}
</style>
</head>
<body>
<div>DIV1 - background-size: auto.</div>
<div class="div2">DIV2 - background-size: 2cm 70px.</div>
<div class="div3">DIV3 - background-size: contain.</div>
<div class="div4">DIV4 - background-size: cover.</div>
</body>
</html>


Браузеры

Internet Explorer =>9.0

Google Chrome => 4.0

Mozilla Firefox => 4.0

Opera => 10.5

Safari => 5.0

 

multiple backgrounds

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

Вот код для этого:

#example1 {    
  width: 500px;    
  height: 250px;    
  background-image: url(sheep.png), url(betweengrassandsky.png);    
  background-position: center bottom, left top;    
  background-repeat: no-repeat;    
  }  

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

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

Указание нескольких фонов с использованием индивидуальных свойств фона

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

Синтаксис:

background-image: <bg-image> [ , <bg-image> ]*

<bg-image> = <image> | none


Примечание: значение 'none' также​ генерирует слой.

Пример:
 

background-image: url(sheep.png), url(betweengrassandsky.png);


Запятая также используется для разделения списка других фоновых свойств: background-repeat, background-attachment, background-position, background-clip, background-origin и background-size.

Пример:
 

background-position: center bottom, left top;


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

Если указываются лишние значения для любого из индивидуальных свойств, они игнорируются. Например, если указано четыре значения для свойства background-position, но только три значения указаны для свойства background-image, четвертое значение в списке не будет использоваться.

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

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

Указание нескольких фонов, используя сокращенное свойство "background"

Несколько фонов может также определено с помощью сокращенного свойства background.

Синтаксис:

background: [ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>


Примечание: задание цвета фона допускается только в последнем фоновом слое.

Пример:
 

background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;


CSS3 спецификация Backgrounds and Borders предлагает дополнительные разъяснения по синтаксису для background:

Число разделенных запятыми элементов определяет число фоновых слоев. Учитывая действующие правила, для каждого слоя сокращение сначала устанавливает для каждого из свойств ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’ начальные значения этого свойства, затем присваивает явные значения, указанные для этого слоя. Наконец, свойство 'background-color' устанавливает заданный цвет, если таковой имеется, иначе устанавливается первоначальное значение.

Если присутствует одно значение , то оно задает значения и "background-origin" и "background-clip". Если два значения присутствуют, то первым устанавливается "background-origin", а вторым "background-clip".

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

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

Firefox поддерживает несколько фонов, начиная с версии 3.6 (Gecko 1.9.2), Safari, начиная с версии 1.3, Chrome, начиная с версии 10, Opera, начиная с версии 10.50 (Presto 2.5) и Internet Explorer, начиная с версии 9.0.

Примеры кросс-браузерности

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

Пример

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

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

#exampleA {    
  width: 500px;    
  height: 250px;    
  background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);    
  background-repeat: no-repeat;    
  background-position: left top, right bottom, left top;    
  }  


либо
 

#exampleA {    
  width: 500px;    
  height: 250px;    
  background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;    
  }  


Пример B

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



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

#exampleB {
display: inline-block;
margin: 1em; padding: 1em;
background-image: url(left.png), url(right.png), url(main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top ;
}


либо

#exampleB {
width: 500px;
height: 250px;
background: url(left.png) left top no-repeat, url(right.png) right top no-repeat, url(main.png) left top repeat-x;
}

 

Источник статьи: http://www.css3.info/preview 

 

test