<style>
要素が宣言されているページの完全な URL は次のとおりです。
http://localhost:8080/JEE/pages/Menu.jsf
また、使用したい画像ファイルの完全な URL は<style>
明示的に指定されていませんが、これまでに提供された情報に基づいている可能性が最も高いです。
http://localhost:8080/JEE/image/add.jpg
あなたの具体的な問題は、サーバーのプロジェクト構造に基づいて HTML ドキュメント内の画像をインライン化するのはサーバーであると何らかの形で予想したことが原因である可能性が最も高いです。しかし、これは完全に間違っています。代わりに、画像リソース (CSS ファイルまたはこの場合は JSF ページ自体) を参照するメイン リソースの URL に対して個別に画像をダウンロードし、レンダリングされた HTML 表現に含めるのは Web ブラウザーです。
したがって、url("/image/add.jpg")
先頭にスラッシュを付けて指定すると、ドメイン相対 URL になり、ブラウザは次の場所から画像をダウンロードしようとします。
http://localhost:8080/image/add.jpg
しかし、これは間違っています。ブラウザーの開発者ツールセットで HTTP トラフィックに注意を払っていれば、ブラウザーが画像要求で HTTP 404 エラーを取得したことに気付いたはずです。ドメイン相対 URL を指定する必要がある場合は、コンテキスト パスを含める必要があります。静的に行うことができます:
.imagesbuton {
background-image: url("/JEE/image/add.jpg");
}
または動的に:
.imagesbuton {
background-image: url("#{request.contextPath}/image/add.jpg");
}
または、相対 URL を使用して、1 つのフォルダーからそのフォルダーに移動することも/JEE/pages
でき/JEE
ます/image
。
.imagesbuton {
background-image: url("../image/add.jpg");
}