25

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

例：

開発中は~/Images/Test.gifのパスが/MyApp/Images/Test.gifに解決される場合がありますが、本番環境では/Images/Test.gifに解決される場合があります(アプリケーションの仮想ディレクトリによって異なります)。 . 私は明らかに、環境間で .css ファイルを変更する必要がないようにしたいと考えています。

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

4

8 に答える 8

11

残念ながら、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 ファイル内の画像パスに関する Brant の質問に完全に答えた人は誰もいませんでした。私は答えを持っています。問題は、「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_content.gif) repeat-y; }

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

    <%@ ContentType="text/css" %>
于 2009-01-14T09:21:33.680 に答える
8

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

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

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

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

于 2008-09-18T02:19:24.333 に答える
6

CSS で使用する画像を の/css/横のフォルダーに入れるだけで、簡単に作業できます/css/style.css。次に、画像を参照するときは、相対パス (例: url(images/image.jpg)) を使用します。

で表示されている画像をフォルダに保存<img>しています。/images/たとえば、写真はコンテンツであり、ウェブサイトのスキン/テーマの一部ではありません。したがって、それらは/css/フォルダに属しません。

于 2010-11-30T23:55:37.287 に答える
3

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

Request.ApplicationPath を使用しないでください - それは悪です! パスに応じて異なる結果を返します!

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

background-image: url(<%= Page.ResolveUrl("~/images/bg_content.gif") %>);
于 2010-06-22T15:45:52.137 に答える
3

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

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

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

于 2012-01-25T14:42:51.003 に答える
1

Windows 7、IIS 7.5 の場合:

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

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

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

于 2010-10-23T03:07:08.093 に答える
-3

.css ファイル内では、相対パスを使用できます。あなたの例では、css ファイルを ~/Styles/mystyles.css に置いたとします。url(../Images/Test.gif) を例として使用できます。

于 2008-09-18T02:19:44.927 に答える
-4

コンテンツコンテナに表示する背景画像を取得するのに苦労し、ここに投稿された他のソリューションと同様の多くのソリューションを試しました。CSSファイルで相対パスを設定し、背景を表示したいaspxページのスタイルとして設定しました。何も機能しませんでした。Marcel Popescuのソリューションを試しましたが、それでも機能しませんでした。

マルセルの解決策と試行錯誤の組み合わせに従って、私はそれを機能させることになりました。コードをweb.configに挿入し、text / css行をCSSファイルに挿入しましたが、CSSファイルのbackgroundプロパティを完全に削除し、背景を設定したいaspxページのコンテンツコンテナのスタイルとして設定しました。画面。

これは、背景を表示したい各ページまたは他のページに対して、style backgroundプロパティを設定する必要があることを意味しますが、それは美しく機能します。

于 2010-05-13T02:05:27.763 に答える