Wiki-учебник по веб-технологиям: CSS/ПараметрыФона ...

Главная | |

Параметры фона в CSS: подробное рассмотрение


Как было показано ранее, параметры фона в CSS позволяют управлять цветом фона элемента, задавать в качестве фона изображение, повторять циклически фоновое изображение вертикально или горизонтально и позиционировать изображение на странице.

Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах параметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).

Параметр Описание Значения IE F N W3C
background
Служит для задания всех параметров фона в одном объявлении backgroundcolor 4 1 6 1*
backgroundimage
backgroundrepeat
backgroundattachment
backgroundposition
background-
attachment
Задает для изображения фиксированное расположение или перемещающееся вместе с остальной страницей scroll
fixed
4 1 6 1
background-
color
Задает цвет фона элемента color-rgb
color-hex
color-name
transparent
4 1 4 1
background-
image
Задает в качестве фона изображение url
none
4 1 4 1
background-
position
Задает начальное положение фонового изображения top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
4 1 6 1
background-
repeat
Определяет, будет ли и каким образом будет повторяться фоновое изображение repeat
repeat-x
repeat-y
no-repeat
4 1 4 1

(* здесь и далее число в столбце “W3C” указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).

Параметр 'background'

Этот параметр предназначен для задания всех свойств фона в одном объявлении.

Наследование: нет.

Примеры:
body
{
background: url(picture.gif)
}
body
{
background: url(http://www.intuit.ru/speciality/image.gif) repeat scroll
}
body
{
background: yellow url(http://www.intuit.ru/speciality/image.gif) repeat-xbottom
} 


Может принимать следующие значения:

Значение Описание
background-color
background-image
background-repeat
background-attachment
background-position
В этом объявлении можно задать от одного до пяти свойств фона

Рассмотрим их подробнее.

Параметр 'background-attachment'

Этот параметр определяет, будет ли фоновое изображение зафиксировано в определенном месте или будет перемещаться вместе со всей страницей.

Наследование: нет.

Может принимать следующие значения:

Значение Описание
Scroll Фоновое изображение перемещается, когда перемещается страница
Fixed Фоновое изображение не перемещается, когда перемещается страница

Пример:

body
{
background-attachment: fixed;
background-repeat: repeat
} 


Параметр 'background-color'

Этот параметр задает фоновый цвет элемента.

Наследование: нет.

Может принимать следующие значения:

Значение Описание
color Значение color может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#ff0000)
transparent Фоновый цвет является прозрачным

Пример:

h1
{
background-color: gray;
font-family: arial
} 


Параметр 'background-image'

Данный параметр задает изображение в качестве фона.

Наследование: нет.

Может принимать следующие значения:

Значение Описание
url Путь доступа к изображению
none Фонового изображения нет

Пример:

body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-repeat: repeat;
background-attachment: fixed
} 


В тех случаях, когда изображение недоступно, необходимо задать цвет background-color, который будет использован.

Параметр 'background-position'

Этот параметр задает начальное положение фонового изображения.

Наследование: нет.

Может принимать следующие значения:

Значение Описание
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
Если определить только одно ключевое слово, то вторым значением подразумевается “center”
x-% y-% Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0% 0%. Правый нижний угол — 100% 100%. Если определено только одно значение, то вторым значением подразумевается 50%.
x-pos y-pos Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы измерения CSS. Если определено только одно значение, то вторым значением подразумевается 50%. Можно смешивать % и эти координаты.

Пример:

body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-position:righttop;
background-attachment: fixed
}
body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-repeat: no-repeat;
background-position: 100% 100%;
background-attachment: fixed
} 


Параметр 'background-repeat'

Этот параметр определяет, каким образом будет повторяться фоновое изображение.

Наследование: нет.

Может принимать следующие значения:

Значение Описание
repeat Фоновое изображение будет повторяться по вертикали и по горизонтали
repeat-x Фоновое изображение будет повторяться по горизонтали
repeat-y Фоновое изображение будет повторяться по вертикали
no-repeat Фоновое изображение будет выведено только один раз

Пример:

body
{
background-image: url(http://www.intuit.ru/departament/image.gif);
background-repeat: repeat;
background-attachment: fixed
} 


Параметры текста CSS позволяют управлять внешним видом текста. Можно изменять цвет текста, увеличивать или уменьшать интервал между символами, выравнивать текст, оформлять текст, делать отступ для первой строки текста и т.д.

Поддержка браузеров: Internet Explorer, Firefox, Netscape.

Параметр Описание Значения IE F N W3C
color Задает цвет текста Color 3 1 4 1
direction Задает направление текста rtl  6 1 6 2
letter-spacing Увеличивает или уменьшает интервал между символами length 4 1 6 1
text-align Выравнивает текст в элементе justify 4 1 4 1
textdecoration Дополнительное оформление текста blink 4 1 4 1
text-indent Делает отступ для первой строки текста элемент % 4 1 4 1
text-shadow length
text-transform Управляет символами элемент lowercase 4 1 4 1
unicode-bidi bidi- 5 2
white-space Задает способ обращения с пробелами внутри элемента nowrap 5 1 4 1
word-spacing Увеличивает или уменьшает пробел между словами length 6 1 6 1

Примеры