Фон и боксовая модель.
С помощью нового свойства 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 код выглядит более "элегантным" и понятным.
Дата добавления: 2015-11-04; просмотров: 459;