Основы 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

<?xml version="1.0"?>

<!-- File Name: Leaves.xml -->

<?xml-stylesheet type="text/css" href="Leaves.css"?>

<POEM>

<TITLE>Leaves of Grass <SUBTITLE>I Sing the Body Electric</SUBTITLE> </TITLE> <AUTHOR>by Walt Whitman</AUTHOR>

<SECTION> <NUMBER>1.</NUMBER> <STANZA> <VERSE>I SING the Body electric;</VERSE> <VERSE>The armies of those I love engirth me, and I engirth them;</VERSE> <VERSE>They will not let me off till I go with them, respond to them,</VERSE> <VERSE>And discorrupt them, and charge them full with the charge of the Soul.</VERSE> </STANZA> <STANZA> <VERSE>Was it doubted that those who corrupt their own bodies conceal themselves;</VERSE> <VERSE>And if those who defile the living are as bad as they who defile the dead?</VERSE> <VERSE>And if the body does not do as much as the Soul?</VERSE> <VERSE>And if the body were not the Soul, what is the Soul?</VERSE> </STANZA> </SECTION>

</POEM>

Листинг 7.4. Leaves.xml

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


Рис. 7.8. 

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


Рис. 7.9. 

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

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

STANZA {background-image:none}

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

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




Содержание  Назад  Вперед