Question

是否可以在layoutunit窗格中显示背景图像？我尝试了以下但没有成功，窗格内容仍然是白色背景：

<?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不透明度？

Answer 1

    <style type="text/css">
        .ui-widget{font-size:90% !important;}
        .ui-layout-unit-content{background-image:url('images/bluebackgroundsmall.jpg');}
    </style>

通过这种方式定义样式和背景图像URL，背景图像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声明放在由JSF <h:outputStylesheet>标记加载的CSS文件中。这需要资源位于/resources子文件夹中。因此，如果您拥有/resources/css/style.css文件中的样式和/resources/css/images文件夹中的CSS背景图像，那么如果您使用以下内容而不是整个<style>

<h:outputStylesheet name="css/style.css" />

Answer 2

我只是复制并粘贴了您的代码，只更改了图片的网址，我才能显示背景。如果您查看Firebug的HTML样式选项卡，您可以看到以下样式应用于布局单元div元素，您可以清楚地看到<head>标记中的样式类覆盖未被覆盖。

Firebug Screenshot

您会注意到我突出显示的样式来自XHTML页面。图像显示出来。

我认为您的问题是，从您的网页上下文来看，它无法找到图片资源。而不是images/foo.jpg尝试/images/foo.jpg，看看是否有所作为。

在layoutunit中的背景图像

2 个答案: