background-origin | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Главная » Справочник CSS3 » Свойства фона


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


background-origin | Свойство CSS

Свойство background-origin для позиционирования фонового изображения




Свойство background-origin позволяет определить точку с которой будет начинаться фоновое изображение.Фоновое изображение может начинаться от внутреннего края границы элемента, от внешнего края границы элемента или только в зоне контента.Дополнительно следует применять альтернативные правила для браузеров,для Firefox это -moz-background-origin,для Safari или Chrome -webkit-background-origin.Свойство проходит валидацию согласно версии CSS3.




Дополнительные свойства


Свойство
Описание
-moz-background-originАльтернативное правило для браузера Firefox
-webkit-background-originАльтернативное правило для браузеров Safari и Chrome

Дополнительные значения свойства background-origin


Значение
Описание
padding-boxФоновое изображение начинается от внутреннего края границы элемента
border-boxФоновое изображение начинается от внешнего края границы элемента
content-boxФоновое изображение начинается только в зоне контента

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство background-origin</title>
<style type="text/css">
<!--
.block {
border: 20px solid #000000;
background: #0ba1d5 url(http://delaisait.ucoz.ru/css/demo/img/css3_background-origin.png) no-repeat;
background-origin: padding-box;
-moz-background-origin: padding-box;
-webkit-background-origin: padding-box;
padding:20px;
height: 300px;
width: 300px;
}
.block1 {
border: 20px solid #000000;
background: #0ba1d5 url(http://delaisait.ucoz.ru/css/demo/img/css3_background-origin.png) no-repeat;
background-origin: border-box;
-moz-background-origin: border-box;
-webkit-background-origin: border-box;
padding:20px;
height: 300px;
width: 300px;
}
.block2 {
border: 20px solid #000000;
background: #0ba1d5 url(http://delaisait.ucoz.ru/css/demo/img/css3_background-origin.png) no-repeat;
background-origin: content-box;
-moz-background-origin: content-box;
-webkit-background-origin: content-box;
padding:20px;
height: 300px;
width: 300px;
}
p {
color: yellow;
font-size: 40px;
text-decoration:blink;
}
-->
</style>
</head>
<body>
<center>
<div class="block"><p>padding-box</p></div>
<br>
<div class="block1"><p>border-box</p></div>
<br>
<div class="block2"><p>content-box</p></div>
</center>
<br>
</body>
</html>

Пример в действии



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-background/#background-origin
Категория: Свойства фона | Добавил: IZOTOP (29.03.2012) | Автор: Меренков Михаил E W
Просмотров: 584 | Теги: css, свойства фона, Fon, background-origin, Фон, style | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]