0

CSSフレームワークを使用していて、アイコンを表示しようとしています（background-imageプロパティでクラスセレクターを使用）。たとえば、私のファイル構造は次のとおりです。

Content / site.css
Content / Folder1  / framework.css
Content / Folder1  / Folder2       / framework-images.css
Content / Folder1  / Folder2       / framework-icon1.png

site.cssは次のようになります。

@include "Folder1/framework.css";
...

次のようなframework.css：

@include "Folder2/framework-images.css";
...

Framework-images.cssは次のとおりです。

.selector {
    background-image: url("icon1.png");
}

しかし、html要素クラス「セレクター」に追加しようとすると、Firefox開発ツールはここからアイコンをロードしようとしていることを示します。

http://localhost:1234/Content/~/Content/Folder1/Folder2/icon.png

正しいパスは（私は正しいですか？）：

~/Content/Folder1/Folder2/icon.png

あるいは単に

http://localhost:1234/Content/Folder1/Folder2/icon.png

では、どこが間違っているのでしょうか？正しいパスを使用するようにクライアントに指示するにはどうすればよいですか？

PS重要な場合は、ドットレス（CSSが少ない）を使用しています。言い換えれば、すべての.cssは実際には.lessです。

PPSこれはASP.NETMVC4アプリです。

更新： @djfarrellyが指摘したように、問題はbackground-imageの誤ったパスにありました：url（...）。私はそれを次のように変更しました：

background-image: url("/Content/Folder1/Folder2/Icon1.png");

そしてそれは働き始めました。しかし、私はまだ混乱しています。フルパスを指定しないと機能しない理由を誰かが説明できますか？

4

1 に答える 1

4

混乱を避けるために、画像への参照はすべてWebサイトのルートフォルダを参照する必要があります。ルートから参照するようにcssを変更しようとしましたか？

.selector {
    background-image: url("/Content/Folder1/Folder2/icon1.png");
}

あなたがそれを含めるならば、/それはそれをきれいにするべきです。

編集：私は元々 、ルートフォルダを参照する ../ための正しいものではなく、 これを投稿しました。/

于 2012-12-14T18:22:23.413 に答える