5.18. Установка свойства background-color
Стандарт CSS поддерживает следующие свойства, позволяющие модифицировать фоновое оформление элемента:
background-color;
background-image;
background-repeat;
background-position.
Фон представляет собой область, окружающую отдельные символы текста элемента. В качестве фона можно устанавливать либо сплошной цвет, либо рисунок.
Технически дочерние элементы не наследуют свойств фона. Однако по умолчанию фон элемента является прозрачным. Это означает, что если опустить все свойства фона для дочернего элемента, то будут видны цвет фона или рисунок родительского элемента (или браузера), т.е. фон дочернего элемента будет таким же, что и фон родительского элемента.
Вы можете установить цветовой фон для элемента (заливку), присвоив значение цвета свойству background-color. (Информация о различных типах значений цвета содержится на вставке «Задание значений цвета» ранее в этой главе.) Например, следующее правило устанавливает светло-желтый цвет фона для элемента TITLE:
TITLE {background-color: yellow}
Напомним, что свойство color устанавливает цвет собственно символов элемента. Так, следующее правило создает синие буквы на желтом фоне:
TITLE
{color: blue;
background-color: yellow}
Чтобы цвет фона элемента не был сплошным, можно присвоить свойству background-color значение transparent, например:
TITLE {background-color: transparent}
Либо, поскольку значение transparent устанавливается по умолчанию, можно просто опустить свойство background-color для данного элемента. Если в качестве фона для данного элемента не установлен рисунок, при установленном значении transparent будет виден фон родительского элемента (или браузера).
5.19. Установка свойства background-image
Элементу можно добавить фоновый рисунок, назначив свойству background-image URL файла с рисунком. (Информация о задании URL содержится в разделе “Задание значений URL”.) Например, следующее правило устанавливает для элемента STANZA фоновый рисунок, содержащийся в файле Leaf.bmp:
STANZA {background-image:url(Leaf.bmp)}
Для дальнейшего рассмотрения воспользуемся таблицей стилей, представленной в Листинге 1,5, которая присоединена к XML-документу, представленному в Листинге 1.6.
/* Имя файла: Knight.css */
РОЕМ
{font-size: 145%}
РОЕМ, TITLE, SUBTITLE, AUTHOR, SECTION, STANZA, VERSE
{display: block)
SECTION, STANZA
{margin-top: 1 em}
STANZA
(background-image: url(Leaf.bmp)}
Листинг 1.5
<?xml version="1.0"?>
<!-- Имя файла: Knight.xml -->
<?xml-stylesheet type="text/css" href="Leaves.css"?>
<POEM>
<TITLE>Сцены из рыцарских времён
<SUBTITLE>Песня Франца</SUBTITLE>
</TTTLE>
<AUTHOR>А. С. Пушкин</AUTHOR>
<SECTION>
<STANZA>
<VERSE>Жил на свете рыцарь бедный,</VERSE>
<VERSE>Молчаливый и простой,</VERSE>
<VERSE>С виду сумрачный и бледный,</VERSE>
<VERSE>Духом смелый и прямой</VERSE>
</STANZA>
<STANZA>
<VERSE>Он имел одно виденье,</VERSE>
<VERSE>Непостижное уму,</VERSE>
<VERSE>И глубоко впечатленье</VERSE>
<VERSE>В сердце врезалось ему</VERSE>
</STANZA>
</SECTION>
</POEM>
Листинг 1.6
На рисунке 11 показано содержимое графического файла Circle.bmp.
Рисунок 11. Содержимое графического файла Circle.bmp
Internet Explorer отобразит документ Knight.xml, как показано на рисунке 12.
Обратите внимание, что рисунок повторяется при заполнении всей области, занимаемой содержимым элемента, достигая почти правой границы окна браузера. Любая часть изображения, выступающая за пределы текста элемента (внизу или вверху) обрезается. В рассматриваемом примере обрезается только очень небольшая часть изображений в нижнем ряду каждого элемента STANZA.
Если вы не хотите задавать фоновый рисунок для элемента, то можно установить для свойства background-image значение none, например:
STANZA {background-image: none}
Либо, поскольку none является значением по умолчанию, можно опустить свойство background-image для элемента. Если для элемента не назначена сплошная заливка (без рисунка), установка none приведет к тому, что будет виден фон родительского элемента (или браузера).
При назначении для элемента и фонового рисунка, и заливку сплошным цветом (с использованием свойства background-color), рисунок будет располагаться поверх заливки.
Рисунок 12. Вид XML-документа “Knight.xml” в браузере