фоновое изображение в макете - PullRequest
Новая
       3

фоновое изображение в макете

2 голосов
/ 11 января 2012

возможно ли отобразить фоновое изображение внутри панели макета? Я пробовал следующее безуспешно, содержимое панели остается белым фоном: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:f="http://java.sun.com/jsf/core"      
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:p="http://primefaces.org/ui" >
<f:view contentType="text/html">
    <h:head>
        <link rel="stylesheet" type="text/css" href="css/bg.css" />
        <style type="text/css">
            .ui-widget{font-size:90% !important;}
            .ui-layout-unit-content{background-image:url('images/bluebackgroundsmall.jpg');}
        </style>
    </h:head>            
<h:body>
 <p:layout fullPage="true">  

<p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">  
    <h:outputText value="Top unit content." />  
</p:layoutUnit>  

<p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">  
    <h:outputText value="South unit content." />  
</p:layoutUnit>  

<p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">  
    <h:form>  
         <h:outputText value="West unit content." />  
    </h:form>  
</p:layoutUnit>  

<p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">  
    <h:outputText value="Right unit content." />  
</p:layoutUnit>  

<p:layoutUnit position="center">  
    <h:form>  
        This fullPage layout consists of five different layoutUnits which are resizable and closable by default.  

    </h:form>  
</p:layoutUnit>  

</p:layout>  
</h:body>
</f:view>
</html>

Содержимое файла bg.css: 

body
{
background-image:url('images/bluebackgroundsmall.jpg');
}

И изображение отображается как весь фон страницы без проблем. Любая помощь о том, как получить изображение отображается на панели макета? или возможно ли это, я видел несколько сообщений, связанных с этой темой без ответа. Если бы я мог отобразить изображение, вторым лучшим вариантом было бы сделать панель прозрачной, есть идеи, как это сделать - нужно ли мне в основном использовать прозрачность CSS?

Ответы [ 2 ]

3 голосов
/ 11 января 2012 
    <style type="text/css">
        .ui-widget{font-size:90% !important;}
        .ui-layout-unit-content{background-image:url('images/bluebackgroundsmall.jpg');}
    </style>

Если URL-адрес стиля и фонового изображения определен таким образом, URL-адрес фонового изображения относительно текущего URL-адреса запроса (тот, который отображается в адресной строке браузера). Итак, представьте, что страница запрашивается:

http://localhost:8080/contextname/somepath/someview.xhtml

Тогда это объявление CSS ожидает, что фоновое изображение будет точно по этому URL:

http://localhost:8080/contextname/somepath/images/bluebackgroundsmall.jpg

Другими словами, в той же папке, где находится файл представления. Вы должны убедиться, что адреса и адреса указаны правильно. Если вы хотите указать URL-адрес фонового изображения относительно пути к контексту, вам необходимо добавить его перед #{request.contextPath}. 

        .ui-layout-unit-content{background-image:url('#{request.contextPath}images/bluebackgroundsmall.jpg');}

Ожидается, что изображение будет именно в этом месте:

http://localhost:8080/contextname/images/bluebackgroundsmall.jpg

Однако канонический подход состоит в том, чтобы поместить объявление CSS в его собственный файл CSS, который вы загружаете с помощью тега JSF <h:outputStylesheet>. Для этого необходимо, чтобы ресурсы были в подпапке /resources. Таким образом, если у вас есть стили в файле /resources/css/style.css и фоновые изображения CSS в папке /resources/css/images, то это будет просто работать, если вы будете использовать следующее вместо целого <style>

<h:outputStylesheet name="css/style.css" />
0 голосов
/ 11 января 2012

Я только что скопировал и вставил ваш код, только изменив URL изображения, и мне удалось получить фон для отображения. Если вы посмотрите на вкладку «Стиль HTML» в Firebug, то увидите, что к элементу div блока макета применяются следующие классы стилей, и вы можете ясно видеть, что переопределения вашего класса стилей в теге <head> не переопределяются.

Firebug Screenshot

Вы заметите стиль, который я выделил, со страницы XHTML. Изображение показывает вверх.

Я думаю, что ваша проблема в том, что из контекста вашей страницы он не может найти ресурс изображения. Вместо того, чтобы делать images/foo.jpg, попробуйте сделать /images/foo.jpg и посмотрите, будет ли это иметь значение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...