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

前端之家收集整理的这篇文章主要介绍了如何将JSF图像资源作为CSS背景图像url引用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我经常使用图像属性更改我的按钮的图像,但有人告诉我,使用.css做一个很好的做法
我试过,但我不能,我做错了什么?这是我做的:

1 – 我的项目的资源存储如下:

2 – 这是我如何创建用于访问图像的style.css

.c2 {
    background: url(/resources/images/smiley.jpg);  
}

3 – 这是我如何从我的页面的主体访问css(我确定这是正确的,因为同一个文档中的其他类在这个页面的其他标签中工作)

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

4 – 这是如何创建一个使用适当的css类的示例commandButton

<h:commandButton styleClass="c2"/>

我认为问题在.css中,我尝试了一些组合,但没有工作:

background-image: url(/resources/images/smiley.jpg);    
background: url(resources/images/smiley.jpg);   
background: url(smiley.jpg);    
background: url(../smiley.jpg);

错误在哪里?

更新
我设法通过以下代码使其工作:

.c2 {   
     background: url("#{resource['images:smiley.jpg']}");               
    }

注意当我使用css(右)和当我使用图像属性(左)时的区别

我如何解决这个问题,所以显示的是保持图像?

@H_301_32@

解决方法

当通过< h:outputStyleSheet>导入CSS样式表时,样式表由FacesServlet通过/javax.faces.resource/*导入和处理。看看生成的< link>元素指向有问题的样式表,你会明白。

您必须更改所有url()依赖关系以使用#{resource [‘library:location’]}。 JSF将自动替换为正确的路径。给定您的文件夹结构,您需要更换

.c2 {
    background: url("/resources/images/smiley.jpg");  
}

通过

.c2 {
    background: url("#{resource['images/smiley.jpg']}");  
}

假设您的webapp上下文名称是游乐场,并且您的FacesServlet映射到* .xhtml,则上述应该在返回的CSS文件中结束如下

.c2 {
    background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}

应该注意的是,JSF实现将仅在CSS文件的第一个请求中确定,如果它包含EL表达式。如果不这样做,效率就不会再试图EL评估CSS文件内容了。因此,如果您首次向CSS文件添加EL表达式,那么您需要重新启动整个应用程序才能使JSF重新检查CSS文件

如果您想从一个组件库(如PrimeFaces)中引用资源,那么在库名称前面加上:。例如。当您使用PrimeFaces“开始”主题,由主题 – 开始标识

.c2 {
    background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");  
}

这将生成

.c2 {
    background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}

也可以看看:

> How to reference CSS / JS / image resource in Facelets template?
> Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images

与具体问题无关,使用图书馆的方式并不完全正确。它是所有相关CSS / JS /图像资源的常用标识符/子文件夹。关键的想法是通过改变图书馆(可以通过EL完成)来改变整个外观。你似乎依靠默认的库。在这种情况下,您可以从< h:outputStylesheet>中省略库。和#{resource}。

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

也可以看看:

> What is the JSF resource library for and how should it be used?

@H_301_32@ @H_301_32@

猜你在找的CSS相关文章