Question

我正在尝试从img加载css和js文件以及mainStyle.css目录中的图像，但没有保证。我无法从css样式表中加载js文件和obama.jpg。

我正面临一个问题，要解释为什么我会Hell World! Say apple!绿色？我已将它们设置为绿色，但现在它们具有红色值，尽管我将它们呈现为绿色!!。

的index.xhtml

<!DOCTYPE html>
<html xmlns="htpp://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <title>External resources</title>
    <h:outputStylesheet library="css" name="mainStlye.css" />
    <h:outputScript library="js" name="mainJS.js" /> 
</h:head>

<h:body>
    <h1>Using external resources</h1>

        <div class="message">Hello World!</div>

        <div class="message">Say apple!</div>

</h:body>
</html>

mainStyle.css

body{
    background: url("#{resource['img/obama.jpg']}");
}

.message{
    color:red;

}

mainJS.js

alert('Javascript works fine');

Answer 1

只需使用css中图像的相对路径即可。此外，您编写的是背景而不是背景图像。

看看这里： fiddle

在你的情况下，将是：

body{
   background-image: url(../img/obama.jpg);
}

在JSF中加载css和js文件

1 个答案: