是否可以在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不透明度?
答案 0 :(得分:3)
<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)。所以想象一下页面是由:
然后这个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" />
答案 1 :(得分:0)
我只是复制并粘贴了您的代码,只更改了图片的网址,我才能显示背景。如果您查看Firebug的HTML样式选项卡,您可以看到以下样式应用于布局单元div元素,您可以清楚地看到<head>
标记中的样式类覆盖未被覆盖。
您会注意到我突出显示的样式来自XHTML页面。图像显示出来。
我认为您的问题是,从您的网页上下文来看,它无法找到图片资源。而不是images/foo.jpg
尝试/images/foo.jpg
,看看是否有所作为。