Основы XML

       

Установка свойства background-image


Вы можете добавить элементу фоновый рисунок, назначив свойству background-image URL файла с рисунком. (Информация о задании URL содержится на вставке "Задание значений URL" ранее в этой лекции.) Например, следующее правило устанавливает для элемента STANZA фоновый рисунок, содержащийся в файле Leaf.bmp:

STANZA {background-image:url(Leaf.bmp)}

Для дальнейшего рассмотрения воспользуемся таблицей стилей, представленной в Листинге 7.3, которая присоединена к XML-документу, представленному в Листинге 7.4.

/* File Name: Leaves.css */

POEM {font-size:145%}

POEM, TITLE, SUBTITLE, AUTHOR, SECTION, NUMBER, STANZA, VERSE {display:block}

SECTION, STANZA {margin-top:1em}

STANZA {background-image:url(Leaf.bmp)}

Листинг 7.3. Leaves.css (html, txt)

Листинг 7.4. Leaves.xml (html, txt)

На рисунке 7.8 показано содержимое графического файла Leaf.bmp.

Установка свойства background-image

Рис. 7.8. 

Internet Explorer 5 отобразит документ Leaves.xml, как показано на рис. 7.9.

Установка свойства background-image

Рис. 7.9. 

Обратите внимание, что рисунок повторяется при заполнении всей области, занимаемой содержимым элемента, достигая почти правой границы окна браузера. (В следующем разделе "Установка свойства background-repeat" вы узнаете, как управлять заполнением.) Любая часть изображения, выступающая за пределы текста элемента (внизу или вверху) обрезается. В рассматриваемом примере обрезается только очень небольшая часть изображений в нижнем ряду каждого элемента STANZA .

Если вы не хотите задавать фоновый рисунок для элемента, то можете установить для свойства background-image значение none , например:

STANZA {background-image:none}

Либо, поскольку none является значением по умолчанию, вы можете опустить свойство background-image для элемента. Если вы не назначили для элемента сплошную заливку (без рисунка), установка none приведет к тому, что будет виден фон родительского элемента (или браузера).

Примечание. Если вы назначите для элемента и фоновый рисунок, и заливку сплошным цветом (с использованием свойства background-color ), рисунок будет располагаться поверх заливки.



Содержание раздела