web-dev-qa-db-ja.com

.cssファイルでアプリの相対仮想パスを参照する

アプリケーションのルートの下に「images」フォルダディレクトリがあるとします。 .cssファイル内から、ASP.NETアプリの相対パスを使用してこのディレクトリの画像を参照するにはどうすればよいですか。

例：

開発時には、〜/ Images/Test.gifのパスは/ MyApp/Images/Test.gifに解決される可能性がありますが、本番環境では、-に解決される可能性があります/ Images/Test.gif（アプリケーションの仮想ディレクトリによって異なります）。私は明らかに、環境間で.cssファイルを変更する必要を避けたいです。

Page.ResolveClientUrlを使用して、レンダリング時に動的にコントロールのStyleコレクションにURLを挿入できることを知っています。これは避けたいです。

asp.netcssbackground-imagedynamic-css
25
user10834

残念ながら、Firefoxにはここで愚かなバグがあります...パスは、CSSファイルの位置に相対するのではなく、ページのパスに相対しています。つまり、ツリーのさまざまな位置にページがある場合（ルートにDefault.aspxがあり、ViewフォルダーにInformation.aspxがあるなど）、相対パスを機能させる方法はありません。 （IEはCSSファイルの場所に関連するパスを正しく解決します。）

私が見つけることができる唯一のものは http://www.west-wind.com/weblog/posts/269.aspx に関するこのコメントですが、正直なところ、私はそれを作ることができませんでしたまだ働きます。もしそうなら、私はこのコメントを編集します：

re：ASP.Netパスの理解Russ Brooks著2006年2月25日8:43 am

CSSファイル内の画像パスに関するブラントの質問に完全に答えた人はいません。答えがあります。問題は、「CSSファイル内でアプリケーション相対画像パスをどのように使用するのか」でした。私もこの問題に長い間不満を感じていたので、最後の3時間を使って解決策を練りました。

解決策は、ASPXページハンドラーを介してCSSファイルを実行し、各パスでサーバー側のコードを少し使用して、ルートアプリケーションパスを出力することです。準備はいい？

  1. Web.configに追加：
 <compilation debug="true">
 <!-- Run CSS files through the ASPX handler so we can write code in them. -->
 <buildProviders>
 <add extension=".css" type="System.Web.Compilation.PageBuildProvider" />
 </buildProviders>
 </compilation>

 <httpHandlers>
 <add path="*.css" verb="GET" type="System.Web.UI.PageHandlerFactory" validate="true" />
 </httpHandlers>

  1. CSS内で、次のように、パスが存在する場合は常にRequest.ApplicationPathプロパティを使用します。

    #content {background：url（<％= Request.ApplicationPath％>/images/bg_c​​ontent.gif）repeat-y; }

  2. .NETはデフォルトでMIMEタイプが "text/html"のASPXページを提供します。その結果、新しいサーバー側のCSSページはこのMIMEタイプで提供され、IE以外のブラウザーがCSSファイルを正しく読み取れなくなります。これを "text/css"に上書きする必要があります。この行をCSSファイルの最初の行として追加するだけです。

    <%@ ContentType="text/css" %>
11
Marcel Popescu

あなたがこれを行うことができることを知らなかった場合には...

CSS内のリソースへの相対パスを指定する場合、CSSを含むファイルではなく、CSSファイルに対する相対パスです。

background-image: url(../images/test.gif);

だからこれはあなたのために働くかもしれません。

8
Allain Lalonde

Marcel Popescuのソリューションは、cssファイルでRequest.ApplicationPathを使用しています。

Request.ApplicationPathは絶対に使用しないでください。パスに応じて異なる結果を返します！

代わりに以下を使用してください。

background-image: url(<%= Page.ResolveUrl("~/images/bg_content.gif") %>);
3
Snarf

動的CSSを.ascxファイルのユーザーコントロールに配置すると、asp.netページプロセッサを介してすべてのcssファイルを実行する必要がなくなります。

<%@ Control %>
<style type="text/css>
div.content
{
background-image:(url(<%= Page.ResolveUrl("~/images/image.png") %>);
}
</style>

ただし、~の問題を解決する最も簡単な方法は、~をまったく使用しないことです。 Visual Studioのソリューションエクスプローラーでアプリケーションを右クリックし、[プロパティ]ウィンドウを選択して、仮想パスを/に変更します。

3
Andrew Weitzen

Windows 7では、IIS 7.5：

マルセルポペスクが言及した手順を実行する必要があるだけではありません。

また、IIS 7.5ハンドラーマッピングでハンドラーマッピングを追加する必要があります。これにより、IISは、*。cssをSystem.Web.UIで使用する必要があることを認識します。 .PageHandlerFactory

Web.configファイルに設定するだけでは十分ではありません。

1
TchiYuan