Курс CSS. Урок 47. CSS3. Фоны. Backgrounds.
Тему фоновых изображений мы достаточно глубоко и широко изучали на предыдущих уроках, см
урок 22,
урок 23,
урок 24,
урок 25,
урок 26,
правда, не выходя за пределы стандарта CSS2.
Теперь посмотрим, что нового и интересного нам предоставляет стандарт CSS3.
Начнем с теории вопроса.
Свойство background-size для определения размера фонового изображения.
CSS3 дает более гибкие возможности дизайнерам.
Например, если мы укажем ширину 40px, а высоту 20px, то мы растянем изображение в ширину в два раза больше, чем в высоту.
В этом случае проценты расчитываются исходя из ширины и высоты родительского элемента.
В нашем примере мы указали 100% и для ширины, и для высоты. В результате фоновый рисунок растянулся на полную ширину и высоту родительского дива.
Свойство background-origin для определения места фонового изображения в блоке.
Рассмотрим несколько примеров использования свойства background-origin
На примере видно, что фоновое изображение прижимается ближе к границе.
На примере видно, что фоновое изображение частично находится в области границы.
Свойство background-clip определяет используемую область фонового изображения.
Фоновое изображение может быть размещено:
CSS3 позволяет использовать несколько фоновых изображений для одного блочного элемента.
Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_047_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_047_001.zip ← скачайте пример, чтобы установить на свой сайт...
Теперь посмотрим, что нового и интересного нам предоставляет стандарт CSS3.
Начнем с теории вопроса.
| NN | Свойство | Гугль Хром | FireFox | IE | Safari | Opera |
|---|---|---|---|---|---|---|
| 14 | background-clip | 4 | 4 | 9 | 5 | 10.5 |
| 15 | background-origin | 4 | 4 | 9 | 5 | 10.5 |
| 16 | background-size | 4 | 4 | 9 | 5 | 10.5 |
Свойство background-size для определения размера фонового изображения.
background-image: url('images/pattern03invert.gif');
До CSS3 фоновое изображение жестко лимитировалось реальным размером изображения.
CSS3 дает более гибкие возможности дизайнерам.
background-image: url('images/pattern03invert.gif');
background-size:40px 20px;
Теперь можно указывать размеры (ширину и высоту) изображения в пикселях или процентах.
background-size:40px 20px;
Например, если мы укажем ширину 40px, а высоту 20px, то мы растянем изображение в ширину в два раза больше, чем в высоту.
background-image: url('images/pattern03invert.gif');
background-size:100% 100%;
Можно указать размер в процентах.
background-size:100% 100%;
В этом случае проценты расчитываются исходя из ширины и высоты родительского элемента.
В нашем примере мы указали 100% и для ширины, и для высоты. В результате фоновый рисунок растянулся на полную ширину и высоту родительского дива.
Свойство background-origin для определения места фонового изображения в блоке.
border-box (область границ)
Фоновое изображение может быть размещено:
padding-box (область отступов паддингов)
border-box (область границ)
content-box (область контента)
padding-box (область отступов паддингов)
- content-box - область контента
- padding-box - область отступов паддингов
- border-box - область границ
Рассмотрим несколько примеров использования свойства background-origin
background-origin:content-box;
В данном случае фоновое изображение располагается в области контента.
background-origin:padding-box;
В следующем примере фоновое изображение располагается в области отсупов паддингов.
На примере видно, что фоновое изображение прижимается ближе к границе.
background-origin: border-box;
В следующем примере фоновое изображение располагается в области границы.
На примере видно, что фоновое изображение частично находится в области границы.
Свойство background-clip определяет используемую область фонового изображения.
Фоновое изображение может быть размещено:
- content-box - область контента
- padding-box - область отступов паддингов
- border-box - область границ
background-clip: content-box;
background-repeat:no-repeat;
background-clip: padding-box;
background-repeat:no-repeat;
background-clip: border-box;
background-repeat:no-repeat;
background-clip: content-box;
background-clip: padding-box;
background-clip: border-box;
CSS3 позволяет использовать несколько фоновых изображений для одного блочного элемента.
background-image:url('images/pattern01.gif'),('images/pattern02.gif');
background-repeat:no-repeat;
background-repeat:no-repeat;
background-image:url('images/pattern01.gif'),('images/pattern2.gif');
background-image:url('images/pattern01.gif'),('images/pattern2.gif');
background-image:url('images/pattern01.gif'),('images/pattern2.gif');
Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_047_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_047_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
