Глава 5
Фон.
CSS 3 предлагает ряд новых инструментов а так же расширяет возможности старых свойств предназначенных для работы с фоном.
В СSS 3 появилась возможность одновременно использовать сразу несколько фоновых изображений для одного и того же элемента. Делается это с помощью уже знакомого нам свойства background-image с тем лишь отличием, что теперь можно указывать не один, а сразу несколько адресов к разным картинкам перечисляя их через запятую.. синтаксис такой:
background-image: url(fon1.jpg), url(fon2.jpg), url(fon3.jpg);
То изображение что идёт в списке первым будет находится поверх других остальные же будут подкладываться под него в том порядке в котором они перечислены.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вставка нескольких фонов</title>
<style type="text/css">
body {
background-image:url(graphics/mammoth.gif), url(graphics/fon.gif);
}
h1,h2 {
text-align: center;
background:#ffffff;
color: #008000;
}
</style>
</head>
<body>
<h1>У этой страницы сразу два фона!</h1>
<h2>Фон "штриховка" и фон "мамонтёнок" это два разных изображения.</h2>
</body>
</html>
При использовании в качестве фона нескольких изображений к ним так же можно применять дополнительные свойства для работы с фоном такие как: background-attachment, background-repeat, background-position и т.д. Значения для этих свойств, в случае если картинок несколько, тоже же указывается через запятую, где первое значение предназначено для первого фона второе для второго и т.д.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вставка нескольких фонов</title>
<style type="text/css">
body {
background-image:url(graphics/mammoth.gif), url(graphics/fon1.gif), url(graphics/fon.gif);
background-repeat: no-repeat, repeat-x, repeat;
background-position: center 100px, 0px 250px;
}
p {
text-align: center;
background:#ffffff;
color: #008000;
}
</style>
</head>
<body>
<p>У этой страницы три фона и каждый из них использует свою позицию и параметры повторения.</p>
</body>
</html>
Теперь с помощью нового свойства background-size можно указывать размер изображения выступающего в качестве фона. Указывать размер ширины и высоты фоновой картинки можно с помощью следующих значений:
- px - В пикселях или любых других единицах измерения принятых в СSS.
- % - в процентах от размеров элемента которому назначается фон. li>
- cover – Растягивает фоновое изображение на весь блок.
- contain – Растягивает фоновое изображение с сохранением пропорций до тех пор, пока его ширина или высота не упрётся в края блока.
- auto - Исходный размер изображения (по умолчанию). В случае если значение auto присвоено только одной из сторон, то её размер вычисляется относительно размера второй стороны с указанным размером.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Размер фонового изображения</title>
<style type="text/css">
div {
background-image:url(graphics/mammoth.gif);
width: 350px;
height: 250px;
margin: 10px;
float: left;
border: solid 2px;
}
span {
color: #0000ff;
font-weight: bolder;
background:rgba(255,255,255,0.5);
padding:5px;
}
.fon1 {background-size: 200px 50px;}
.fon2 {background-size: 20% 80%;}
.fon3 {background-size: contain;}
.fon4 {background-size: cover;}
.fon5 {background-size: auto 50px;}
.fon6 {background-size: auto auto;}
</style>
</head>
<body>
<div class="fon1"><span>background-size: 200px 50px;</span></div>
<div class="fon2"><span>background-size: 20% 80%;</span></div>
<div class="fon3"><span>background-size: contain;</span></div>
<div class="fon4"><span>background-size: cover;</span></div>
<div class="fon5"><span>background-size: auto 50px;</span></div>
<div class="fon6"><span>background-size: auto auto;</span></div>
</body>
</html>
Ранее мы с Вами уже знакомились со свойством background-repeat которое определяет по какому принципу фоновое изображение будет дублироваться в том или ином блоке. Напомню, что свойство background-repeat согласно спецификации CSS 2.1 могло принимать следующие значения:
- no-repeat - запретить повторение, показать только одно изображение.
- repeat- повторять изображение (по умолчанию).
- repeat-x - повторять только по горизонтали.
- repeat-y - повторять только по вертикали.
Так вот в спецификации CSS 3 для данного свойства добавилось ещё два весьма интересных значения, которые определяют, что делать в случаях, когда крайние изображения выкладываемые «плиткой» не помещаются в заданные размеры блока (по умолчанию они обрезаются):
- space – Между фоновыми изображениями выкладываемых «плиткой» равномерно добавляются пустые пространства, так чтобы в блоке поместилось максимальное количество целых рисунков.
- round – Дублируемые фоновые изображения масштабируются до тех пор пока крайние рисунки целиком не впишутся в заданные размеры.
Думаю на примере будет понятнее:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Повторение фонового изображения</title>
<style type="text/css">
div {
background-image:url(graphics/fon1.gif);
width: 350px;
height: 250px;
margin: 10px;
float: left;
border: solid 2px;
}
span {
color: #0000ff;
font-weight: bolder;
background:rgba(255,255,255,0.5);
padding:5px;
}
.fon2 {background-repeat: space;}
.fon3 {background-repeat: round;}
</style>
</head>
<body>
<div class="fon1"><span>по умолчанию.</span></div>
<div class="fon2"><span>background-repeat: space;</span></div>
<div class="fon3"><span>background-repeat: round;</span></div>
</body>
</html>
Жалко конечно, но значения round и space на данный момент поддерживаются только браузерами IE9+ и Opera 11+..
С помощью нового свойства background-origin можно определять область позиционирования фона в том или ином блоке.
Возможные значения такие:
- padding-box - Фон позиционируется от краёв блока.
- border-box - Фон позиционируется от границ блока.
- content-box - Фон позиционируется от полей блока.
Свойство background-origin не применяется, если значение background-attachment задано как fixed.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон и боксовая модель.</title>
<style type="text/css">
div {
background-image:url(graphics/fon1.gif);
background-repeat: no-repeat;
width: 150px;
height: 150px;
margin: 15px;
padding: 15px;
float: left;
border: dashed 15px green;
}
span {
color: #0000ff;
font-weight: bolder;
}
.fon1 {background-origin:border-box;}
.fon2 {background-origin:padding-box;}
.fon3 {background-origin:content-box;}
</style>
</head>
<body>
<div class="fon1"><span>Фон позиционируется от краёв блока.</span></div>
<div class="fon2"><span>Фон позиционируется от границ блока.</span></div>
<div class="fon3"><span>Фон позиционируется от полей блока.</span></div>
</body>
</html>
Браузеры Chrome 3.0, Safari5.0 и их более ранние версии поддерживают данное свойство используя префикс -webkit-background-origin.
Браузер Firefox вплоть до версии 4.0 так же работает только со своим префиксом -moz-background-origin.
Так же в спецификацию CSS3 вошло новое свойство background-clip которое определяет что делать с фоновым изображением или цветом фона если оно наплывает на границы блока.
Значения могут быть следующими:
- padding-box - Фон не отображается под границами блока.
- border-box - Фон отображается под границами блока.
- content-box - Фон отображается только внутри контента.
Как и в случае со свойством background-origin эффект применения будет заметен если использовать толстые пунктирные или прозрачные границы.
Смотрим пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон и боксовая модель.</title>
<style type="text/css">
div {
background-image:url(graphics/fon1.gif);
width: 150px;
height: 150px;
margin: 15px;
padding: 15px;
float: left;
border: dashed 15px green;
}
span {
color: #0000ff;
font-weight: bolder;
}
.fon1 {background-clip:border-box;}
.fon2 {background-clip:padding-box;}
.fon3 {background-clip:content-box;}
</style>
</head>
<body>
<div class="fon1"><span>В этом блоке фон наплывает на границы.</span></div>
<div class="fon2"><span>Здесь фон начинается от границ блока.</span></div>
<div class="fon3"><span>А здесь фон распространяется лишь на содержание элемента.</span></div>
</body>
</html>
Браузеры Safari и Chrome используют данное свойство с префиксом -webkit-background-clip, а Firefox 4.0 и ниже -moz-background-clip.
Браузер Opera вплоть до версии 12.0 не поддерживает значение content-box.
Что бы не возникало вопросов покажу пример в котором наглядно демонстрируются отличия свойства background-origin от свойства background-clip.
Итак, как говорится, найдите 10 отличий:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Отличие свойства background-origin от свойства background-clip.</title>
<style type="text/css">
div {
background-image:url(graphics/fon1.gif);
width: 150px;
height: 150px;
margin: 15px;
padding: 15px;
float: left;
border: 15px dashed green;
}
span {
color: #0000ff;
font-weight: bolder;
}
.fon1 {background-origin:border-box; -webkit-background-origin:border-box; -moz-background-origin:border-box;}
.fon2 {background-origin:padding-box; -webkit-background-origin:padding-box; -moz-background-origin:padding-box;}
.fon3 {background-origin:content-box; -webkit-background-origin:content-box; -moz-background-origin:content-box;}
.fon4 {background-clip:border-box; -webkit-background-clip:border-box; -moz-background-clip:border-box; clear:left;}
.fon5 {background-clip:padding-box; -webkit-background-clip:padding-box; -moz-background-clip:padding-box;}
.fon6 {background-clip:content-box; -webkit-background-clip:content-box; -moz-background-clip:content-box;}
</style>
</head>
<body>
<div class="fon1"><span>Применено свойство: background-origin:border-box;</span></div>
<div class="fon2"><span>Применено свойство: background-origin:padding-box;</span></div>
<div class="fon3"><span>Применено свойство: background-origin:content-box;</span></div>
<div class="fon4"><span>Применено свойство: background-clip:border-box;</span></div>
<div class="fon5"><span>Применено свойство: background-clip:padding-box;</span></div>
<div class="fon6"><span>Применено свойство: background-clip:content-box;</span></div>
</body>
</html>
Работая одновременно с несколькими фонами CSS код можно формировать с помощью базового свойства background выглядеть это будет так:
body{
background: url("graphics/mammoth.gif") no-repeat center 100px,
url("graphics/fon1.gif") repeat-x 0px 250px,
url("graphics/fon.gif") repeat;
}
- такая запись являться аналогом той, которую мы с Вами разобрали в примере выше:
body {
background-image:url(graphics/mammoth.gif), url(graphics/fon1.gif), url(graphics/fon.gif);
background-repeat: no-repeat, repeat-x, repeat;
background-position: center 100px, 0px 250px;
}
По-моему в первом случае CSS код выглядит более "элегантным" и понятным.
