5

次の構造を持つ MVC4 プロジェクトがあります。

/Content/css/sprites/topbar.css

/Content/images/topbar.png

css ファイルでは、次を使用して画像を参照しようとしています。

background: url('../../images/topbar.png')

しかし、画像は表示されません。画像が配置されるように変更した場合：

/Content/css/sprites/topbar.png

css を次のように変更します。

background: url('content/css/sprites/topbar.png')

それは機能しますが、これは私のプロジェクト構造を壊します。

何か案は？

編集

関連性があるとは思わなかったので、他には言及しませんでしたが、これに影響しているようです!

以前は@System.Web.Optimization.Styles.Render("~/MainStyles")css をバンドルして縮小していましたが、その一歩を踏み出すと、期待どおりに機能します。プロジェクト構造とバンドルを使用してすべてを機能させるにはどうすればよいですか?

4

4 に答える 4

8

他の誰かがこの問題を抱えていたかどうかはわかりません。ただし、css で相対パスを使用することはできます。重要なのは、実際のcssが存在するのと同じフォルダーへの仮想パスを使用してバンドルを登録することです。このようにして、MVC はそのパスのハンドラーからバンドルされた css を要求します。

バンドル登録を次のように変更してみてください。

bundles.Add(new StyleBundle("~/Content/css/sprites/topbar")
              .Include("~/Content/css/sprites/topbar.css")
            );

次に、あなたの見解で@Script.Render("/Content/css/sprites/topbar")

Mvc は、コンパイル済みの css バンドルをリクエストします。/Content/css/sprites/topbar?{some-crazy-token-thing}

于 2013-05-26T07:41:33.377 に答える
5

私は問題が何であるかを知りました。

それは確かにMVCで使用されたバンドルとミニファイでした。cssが画像を探していたとき、cssファイルが置かれているフォルダーではなく、バンドルが現在のフォルダーとして指しているフォルダーを探していました。

于 2012-09-10T13:18:06.637 に答える
3

使用してみてください：

.social ul li a.blog { background: url(@Url.Content("~/Content/img/houseIcon.png")) no-repeat left top; }

CSS で razor を使用するには、http://www.codeproject.com/Articles/171695/Dynamic-CSS-using-Razor-Engineを参照してください。

于 2012-09-10T12:15:09.983 に答える
1

CSS 参照画像は、CSS ファイル自体を保持しているディレクトリと同じフォルダー、またはそのサブフォルダーに保存することをお勧めします。これにより、CSS ファイルで最小限の長さの相対パスを使用できます。

アプリケーションが常に Web サイトのルートにある場合は、ルート相対パスを使用できます (例: background-image: url("/content/images/toopbar.jpg"); )。

うーん、しかし、「../images/topbar.png」も機能するはずです。あなたはそれを試しましたか？

于 2012-09-10T12:15:07.680 に答える