CSS3 стола
CSS3 содержит несколько новых фоновых свойств, которые позволяют больший контроль фонового элемента.
В этой главе вы узнаете, как добавить несколько фоновых изображений для одного элемента.
Вы также узнаете о следующих новых свойств CSS3:
-
background-size -
background-origin -
background-clip
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit-, -moz- или -o- указать первую версию , которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 Несколько фонов
CSS3 позволяет добавить несколько фоновых изображений для элемента, через background-image свойства.
Различные фоновые изображения разделяются запятыми, и изображения накладываются на друг друга, где первое изображение находится ближе всего к зрителю.
В следующем примере имеет два фоновых изображений, первое изображение цветка (выравнивается по нижней и правой), а второе изображение представляет собой справочный документ (выравнивается по верхнему левому углу):
пример
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} Попробуй сам " Несколько фоновых изображений можно задать с помощью либо отдельных свойств фона (как показано выше) или background сокращённого свойства.
В следующем примере используется background сокращённое свойство ( такой же результат , как в примере выше):
пример
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Попробуй сам " CSS3 фона Размер
CSS3 background-size свойство позволяет указать размер фоновых изображений.
Перед CSS3, размер фонового изображения был фактический размер изображения. CSS3 позволяет повторно использовать фоновые изображения в различных контекстах.
Размер может быть указан в длину, проценты, или с помощью одного из двух ключевых слов: содержать или крышку.
Следующий пример изменяет фоновое изображение гораздо меньше, чем исходное изображение (с использованием пикселей):
Оригинальный фоновое изображение:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Измененный размер фонового изображения:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Вот код:
пример
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Попробуй сам " Две другие возможные значения background-size могут contain и cover .
contain ключевое слово масштабируется фоновое изображение , чтобы быть настолько большим , насколько это возможно (но как его ширина и высота ее должна соответствовать в области содержимого). Таким образом, в зависимости от пропорций фонового изображения и области фона позиционирования, могут быть некоторые участки фона, которые не подпадают под фоновое изображение.
cover ключевого слова масштабирует фоновое изображение таким образом , чтобы область содержимого полностью покрыта фоновое изображение (как его ширина и высота равны или превышают область содержимого). Таким образом, некоторые части фонового изображения может быть не видна на заднем плане области позиционирования.
Следующий пример иллюстрирует использование contain и cover :
пример
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Попробуй сам " Определить Размеры нескольких фоновых изображений
background-size свойство также принимает несколько значений для фонового размера (используя список разделенных запятыми), при работе с несколькими фонов.
Следующий пример определил три фоновых изображений, с различным background-size значения для каждого изображения:
пример
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} Попробуй сам " Полный размер фоновое изображение
Теперь мы хотим иметь фоновое изображение на веб-сайте, который охватывает все окно браузера во все времена.
Эти требования заключаются в следующем:
- Заполните всю страницу с изображением (без пробелов)
- Масштаб изображения по мере необходимости
- Центр изображения на странице
- Не вызывают скроллбары
В следующем примере показано, как это сделать; С помощью элемента HTML (HTML-элемент всегда по крайней мере высота окна браузера). Затем установите фиксированный и центрированную фон на нем. Затем установите его размер с background-size имущества:
пример
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} Попробуй сам " CSS3 background-origin недвижимости
CSS3 background-origin свойство определяет , где фоновое изображение позиционируется.
Свойство принимает три различных значения:
- border-box - фоновое изображение начинается с верхнего левого угла границы
- padding-box - ( по умолчанию) фоновое изображение начинается с верхнего левого угла отступа края
- content-box - фоновое изображение начинается с верхнего левого угла содержимого
Следующий пример иллюстрирует background-origin имущества:
пример
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Попробуй сам " CSS3 background-clip недвижимости
CSS3 background-clip свойство определяет область рисования фона.
Свойство принимает три различных значения:
- border-box - ( по умолчанию) фон окрашен к внешнему краю границы
- padding-box - фон окрашен к внешнему краю прокладки
- content-box - фон окрашен в поле контента
Следующий пример иллюстрирует background-clip свойство:
пример
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »
CSS3 Свойства фона
| Имущество | Описание |
|---|---|
| background | Сокращённое свойство для установки всех свойств фона в одной декларации |
| background-clip | Определяет область рисования фона |
| background-image | Задает один или несколько фоновых изображений для элемента |
| background-origin | Определяет, где фоновое изображение (з) / позиционируются |
| background-size | Задает размер фонового изображения (ы) |