CSS中的background-image:url("")h:未加载outputStylesheet

Question

对不起,如果没有正确询问问题.图像在struts项目中显示得很好,但在JSF2项目中没有.所有的CSS和按钮都渲染得很好except image that has url in css.

文件夹结构

resources -> css -> bootstrap.min.css
resources -> img -> glyphicons-halflings.png

bootstrap.min.css

background-image: url("../img/glyphicons-halflings.png");

1 - 如果我使用的<h:outputStylesheet library="css" name="bootstrap.min.css"/>是背景图像,则生成的url http://localhost:8000/img/glyphicons-halflings.png因此图像无法加载.它应该是http://localhost:8000/resources/img/glyphicons-halflings.png

2 -如果我使用<link href="#{request.contextPath}/resources/css/bootstrap.min.css" rel="styleSheet" type="text/css"/>比

Firefox - > Firebug - > Net tab {资源添加多次}

http://localhost:8000/resources/resources/img/glyphicons-halflings.png

不知道如何加载css中的图像并应用于类.

将EDIT图标显示为链接以单击下一页.

 <h:outputLink value="edit.xhtml" >
                            <i class="icon-edit" ></i>
                            <f:param name="id" value="#{person.id}"/>
                        </h:outputLink>

Answer 1

您应该#{resource}在CSS中使用EL变量来指定图像资源.

background-image: url("#{resource['img/glyphicons-halflings.png']}");

也可以看看:

• 如何将JSF图像资源引用为CSS背景图像url