我这里有麻烦了。我有一个 JSF 应用程序，它有一个名为 baseTemplate.xhtml 的模板文件。此文件位于/resources/template 文件夹中。遵循文件代码:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="cssLayout.css"/>
<h:outputStylesheet library="css" name="menu.css"/>
<h:outputStylesheet library="css" name="rodape.css"/>
<title>JSF Project</title>
</h:head>
<h:body>
<div id="estrutura">
<div class="top">
<ui:insert name="top">
<ui:include src="somefile"/>
</ui:insert>
</div>
<div id="menu">
<ui:insert name="menu">
<ui:include src="somefile"/>
</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">
</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content"></ui:insert>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include src="somefile"/>
</ui:insert>
</div>
</div>
</h:body>
</html>
在我位于/resources/css 文件夹内的 cssLayout.css 文件中，我有以下规则:
.top {
position: relative;
height: 120px;
padding: 0;
margin: 0 0 15px 0;
background-image: url('imgSite/sisLogo.png');
background-repeat: no-repeat;
}
图像 sisLogo.png 位于/resources/css/imgSite 下。我应用程序的所有页面都在 /pages 内。当我使用该模板时，他不会加载top 的图像背景，但会加载其他css 属性。似乎是背景图像 url 路径问题。我该如何解决这个问题？
元素文件夹结构如下:
/
pages/
home.xhtml (using the template)
resources/
css/
cssLayout.css
imgSite/
sisLogo.png
templates/
baseTemplate.xhtml
最佳答案
CSS 背景图像是相对于 CSS 文件的请求 URL 加载的(因此并不直接与其在网络内容中的物理位置相关)。如果您探索 <h:outputStylesheet> 生成的 HTML 输出，然后你会看到请求的URL变了。假设上下文路径为 /somecontext和一个 FacesServlet *.xhtml 的映射，它看起来像这样:
<link rel="stylesheet" type="text/css" href="/somecontext/javax.faces.resource/cssLayout.css.xhtml?ln=css" />
请注意，您 ( improper btw ) 对 library 的使用已移动 /css至 ?ln=css .您需要修复背景图片 url()因此，它与 CSS 的真实请求 URL 相关。例如
background-image: url("../resources/css/imgSite/sisLogo.png");
一种更可靠的方法，采用 JSF 资源标识符规则和 FacesServlet考虑映射，就是用#{resource}在 EL 中:
background-image: url("#{resource['css:imgSite/sisLogo.png']}");
另见:
关于css - jsf模板中的背景url路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12166854/