Вставка нескольких фонов.
В СSS 3 появилась возможность одновременно использовать сразу несколько фоновых изображений для одного и того же элемента. Делается это с помощью свойства background-image указыват ьадресс картинки нужно через запятую, синтаксис такой:
background-image: url(fon1.jpg), url(fon2.jpg), url(fon3.jpg);
То изображение что идёт в списке первым будет находится поверх других остальные же будут подкладываться под него в том порядке в котором они перечислены.
Пример CSS кода:
body{background-image: url(../bg.gif),url(../2css.png)}
h1 { color: #e0023a; font-size: 2em; font-weight: bold; margin: 5em 0 0.67em; text-shadow: 3px 2px 1px #fff; }
Пример HTML кода:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Первый фон - штриховка вертикальная<br>Второй фон - рисунок</h1>
</body>
</html>
При использовании в качестве фона нескольких изображений к ним так же можно применять дополнительные свойства для работы с фоном такие как: background-attachment, background-repeat, background-position и т.д. Значения для этих свойств, в случае если картинок несколько, тоже же указывается через запятую, где первое значение предназначено для первого фона второе для второго и т.д.
Пример CSS кода:
body{background-image: url(../2css.png),url(../n2.png),url(../CSS3.png); background-repeat: no-repeat, repeat-x, repeat;
background-position: center 50px, 0px 350px;}
Пример HTML кода:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
Размер фонового изображения.
Теперь с помощью нового свойства background-size можно указывать размер изображения выступающего в качестве фона. Указывать размер ширины и высоты фоновой картинки можно с помощью следующих значений:
- px - В пикселях или любых других единицах измерения принятых в СSS.
- % - в процентах от размеров элемента которому назначается фон. li>
- cover – Растягивает фоновое изображение на весь блок.
- contain – Растягивает фоновое изображение с сохранением пропорций до тех пор, пока его ширина или высота не упрётся в края блока.
- auto - Исходный размер изображения (по умолчанию). В случае если значение auto присвоено только одной из сторон, то её размер вычисляется относительно размера второй стороны с указанным размером.
Пример CSS кода:
div {
background-image:url(../CSS3.png);
width: 350px;
height: 250px;
margin: 10px;
float: left;
border: solid 2px;
}
span { color: #e0023a;
font-size: 28px;
font-weight: bolder;
background:rgba(255,255,255,0.5) url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)');
padding:5px;
text-shadow: 3px 2px 1px #fff; }
.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;}
Пример HTML кода:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="fon1"></div>
<div class="fon2"></div>
<div class="fon3"></div>
<div class="fon4"></div>
<div class="fon5"></div>
<div class="fon6"></div>
</body>
</html>
Фон и боксовая модель.
С помощью нового свойства background-origin можно определять область позиционирования фона в том или ином блоке.
Возможные значения такие:
- padding-box - Фон позиционируется от краёв блока.
- border-box - Фон позиционируется от границ блока.
- content-box - Фон позиционируется от полей блока.
Свойство background-origin не применяется, если значение background-attachment задано как fixed.
Пример CSS кода:
div {
background-image:url(../bg2.gif);
background-repeat: no-repeat;
width: 150px;
height: 150px;
margin: 15px;
padding: 15px;
float: left;
border: double 15px gray;
}
span { color: #e0023a; font-weight: bolder; margin-top: 25px; }
.fon1 {background-origin:border-box;}
.fon2 {background-origin:padding-box;}
.fon3 {background-origin:content-box;}
Пример HTML кода:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</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 эффект применения будет заметен если использовать толстые пунктирные или прозрачные границы.
Браузеры Safari и Chrome используют данное свойство с префиксом -webkit-background-clip, а Firefox 4.0 и ниже -moz-background-clip.
Браузер Opera вплоть до версии 12.0 не поддерживает значение content-box.
Что бы не возникало вопросов покажу пример в котором наглядно демонстрируются отличия свойства background-origin от свойства background-clip.
