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

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

.rich-ddmenu-label {

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

}

но это, похоже, даже не пытается поместить изображение в любом месте.

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

<h:graphicImage/>

Я не знаю, как поместить текст поверх него.

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

9
css jsf richfaces

5 ответов

предполагая, что рассматриваемый элемент получает 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.

5

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

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

вот что я сделал. но первый мой filestructure

  • / ресурсы / общие / наложение.код XHTML>- это один icludes следующий css (его составной компонент)
  • / ресурсы / общие / наложение.в CSS
  • /ресурсов/изображения/логотипа.формат PNG

теперь здесь идет CSS

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

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

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

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

надеюсь, что это помогает ;)

66

вы следуете примеру на демонстрационный сайт Richfaces? то есть. используйте фасет и поместите изображение и текст внутри заключительного элемента (например. в span или 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>
2

моя структура папок выглядит следующим образом:

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

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

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

попробуйте ниже:

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

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

надеюсь, что это помогает.

2

Я получил это решение: создайте новый .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>
1