Как добавить фоновые изображения в приложение JSF с помощью richfaces и CSS?

Я создаю веб-сайт, используя JSF и richfaces, но мне нужно сделать несколько фоновых изображений для меток раскрывающегося меню. Я видел, что вы можете использовать атрибут стиля, выполнив

.rich-ddmenu-label {

    background-image: url("images/the_image.gif");

}

Но это, кажется, даже не пытается поместить изображение куда-нибудь.

Я могу использовать изображение, используя

<h:graphicImage/>

Но я не знаю, как наложить на него текст.

Что я делаю неправильно? Как мне вставить фоновое изображение за текстом?


css jsf richfaces
person user125157    schedule 18.06.2009    source источник

Ответы (5)


arrow_upward
5
arrow_downward

Предполагая, что к рассматриваемому элементу применяется class="rich-ddmenu-label", проблема, скорее всего, связана с путем к фоновому изображению.

Путь указывается относительно того места, где находится CSS. Если он находится во внешнем файле, он должен относиться к нему, например:

/css/styles.css
/images/the_image.gif

CSS должен быть:

background-image: url("../images/the_image.gif");

Если CSS встроен на HTML-страницу, он будет относиться к текущему пути. Таким образом, если страница расположена по адресу http://server/path/to/page, она будет искать изображение по адресу http://server/path/to/page/images/the_image.gif, хотя вы, вероятно, имели в виду http://server/images/the_image.gif.

Если это не ответ, опубликуйте сгенерированный HTML-код.

person roryf    schedule 18.06.2009
comment
Мне просто нужно было две точки до /images/the_image.gif. Огромное спасибо! - person user125157; 18.06.2009
comment
не совсем правильный ответ для JSF. См. Ответ ниже, за который проголосовало 23 человека. - person Jonathan S. Fisher; 01.07.2012

arrow_upward
69
arrow_downward

У меня была такая же проблема с JSF 2.0. Мне пришлось использовать CSS, и решение с относительным путем для меня тоже не сработало (например, Чоггер опубликовал).

В своей книге я прочитал, что когда вы используете Facelets как VDL (язык декларации представления), можно использовать выражения даже на простой HTML-странице. Так у меня возникла идея поместить EL прямо в мой CSS. Примечание: мне не нужно было менять имя файла или что-то еще.

Вот что я сделал. но сначала моя файловая структура:

  • /resources/common/overlay.xhtml -> этот включает следующий CSS (его составной компонент)
  • /resources/common/overlay.css
  • /resources/images/logo.png

А вот и CSS:

.someclass { 
    background-image:url("#{resource['images:logo.png']}"); 
}

в этом случае resource - это неявный объект JSF 2, images - это библиотека, в которой должен искать JSF (jsf ожидает все библиотеки / файлы в ресурсах, по крайней мере, ResourceHandler по умолчанию), а затем имя ресурса.

Для более глубоких структур это будет:

#{resource['images/folder:logo.png']}

Надеюсь, это поможет ;)

person lostiniceland    schedule 09.01.2010
comment
спасибо, у меня все отлично работает, последний подход, например: background-image: url (# {resource ['images / bg-pattern-t.gif']}) - person Valter Silva; 26.07.2011
comment
На самом деле это именно то, что я искал. Способ доступа к ресурсам в css без написания абсолютного пути, например / ressources / ... - person Sebastian Hoffmann; 07.08.2012
comment
И если ваша папка изображений вложена на один уровень ниже (например, bootstrap / img), EL будет выглядеть так: url (# {resource ['bootstrap / img: icon.png']}); - person Brando_Calrissian; 07.09.2013
comment
Есть какие-нибудь подсказки, как это сделать с темами? - person Random; 19.09.2013
comment
@Brando_Calrissian, это не то, как это работает. Чтобы лучше понять библиотеки ресурсов JSF, проверьте Для чего нужна библиотека ресурсов JSF и как ее следует использовать? - person Luiggi Mendoza; 24.09.2013

arrow_upward
2
arrow_downward

Следуете ли вы примеру ? т.е. используйте фасет и поместите изображение и текст внутри охватывающего элемента (например, диапазона или div)

<rich:dropDownMenu>
    <f:facet name="label"> 
        <h:panelGroup>
            <h:graphicImage value="/images/icons/copy.gif" styleClass="pic"/>
            <h:outputText value="File"/>
        </h:panelGroup>
    </f:facet>
    <rich:menuItem submitMode="ajax" value="New"
        action="#{ddmenu.doNew}" icon="/images/icons/create_doc.gif">
    </rich:menuItem>
    ...
</rich:dropDownMenu>
person Damo    schedule 18.06.2009
comment
Это показывает, как разместить изображение рядом со словами. Мне нужно разместить несколько слов поверх изображения. Во многих местах показано, как это сделать с помощью HTML и CSS, но я не могу заставить его работать с Richfaces и CSS. - person user125157; 18.06.2009
comment
просто примените фоновое изображение к panelGroup (или div или тому, что вы используете) - person Damo; 18.06.2009

arrow_upward
2
arrow_downward

Моя структура папок следующая:

веб-страницы-> ресурсы-> css // css страницы

веб-страницы-> ресурсы-> фото // изображения

веб-страницы // файлы xhtml

Попробуйте следующее:

background-image :url("../pics/logo.gif");

.. перемещает вас на один уровень выше / pics перемещает вас в каталог pics /logo.gif дает вам файл

Надеюсь это поможет.

person Michael    schedule 28.04.2010

arrow_upward
1
arrow_downward

У меня есть такое решение: создайте новый файл .css с этим содержимым

body {
background-image: url(../resources/images/Fondo.GIF);
}

это загрузит файл так же, как и html. Благодаря этому вы сможете загрузить фоновый файл на уровне тела (на всей странице). После вардов вы можете загрузить файл css с помощью этой инструкции в файле jsf:

<h:head>
    <h:outputStylesheet name="ps-pagolinea.css" library="css" />
    <h:outputScript name="corrigePoliza.js" library="scripts"/>
</h:head>
person Juan Miguel Olguin Salguero    schedule 25.01.2011