問題タブ [background-image]

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

例：

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

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

私の Web ページは幅 960px の DIV にあり、次のコードを使用して、この DIV をページの中央に配置します。

ページの中央に並べて表示するには、html/body の背景画像が必要ですが、ブラウザで表示可能なペインの幅が奇数ピクセルの場合、中央の背景と中央の DIV は整列しません。 .

これはFFでのみ発生します。

誰かが回避策を知っていますか?

私が取り組んでいる Web サイトで、画像と背景画像を Internet Explorer 6 で読み込めないという問題が発生しています。

この問題が発生する可能性のあるページの例を次に示します。

サンプルページ

これまでのところ、次の考えられる問題を調べて、ほとんど除外しました。

• 画像ファイル内の XML/余分なデータ (google photoshop 7 Internet Explorer)
• 破損した画像ファイル

無効なマークアップを除外していません。

この問題が報告されているほとんどのページに検証エラーがあることに気付きました。適切な場所でそれらを修正する作業を行っています。

私が見る動作は、ページが読み込まれ、背景画像以外のすべての要素がレンダリングされることです。スローされる JavaScript エラーはありません。Fiddler を使用する場合、画像のリクエストは行われません。ブラウザが background-image を直接指している場合、キャッシュがクリアされ、ブラウザが HTML ページに戻ると、background-image が HTML ページ内に読み込まれます。

この問題を攻撃する方法について、追加の提案はありますか?

HTML要素（body、divなど）の背景画像を取得して、幅と高さ全体を拡大しようとしています。

運が悪い。それは可能ですか、それとも背景画像以外の方法で行う必要がありますか？

私の現在のCSSは次のとおりです。

前もって感謝します。

編集：私はガブリエルの提案でCSSを維持することに熱心ではないので、代わりにページのレイアウトを変更しています。しかし、それが最良の答えのように思われるので、私はそれをそのようにマークしています。

クラスと ID を使用してスタイルを設定した Div がいくつかあります。それらは背景のプレースホルダーにすぎないため、div 自体は空です。部門の例:

次に、この css を使用してスタイルを設定します。

Div がドキュメントの左上にある限り、画像は正しく表示されますが、Div がページの別の場所に配置されると、画像はページの左上隅に留まり (見えなくなり)、画像と重なる部分のみが表示されます。 div (この例では、これは画像の下部になります)。

編集 他のレイアウトに影響を与えずにこれらの Div を配置しようとしています。それらは他のレイアウトの背後にあります。これは、背景画像が div の位置に従わないという事実を除いて機能します。
したがって、基本的に私の質問は、ranImg1 div の背景が div と一緒に配置されていないのに、左上隅にとどまっている理由と、これを修正する方法です。

背景画像を 2 枚使用することはできますか? たとえば、1 つの画像を上部で繰り返し (repeat-x)、別の画像をページ全体で繰り返し (repeat) たいとします。ページ全体での画像は、上部での繰り返し画像の後ろにあります。

html と body の背景を設定することで、2 つの背景画像に望ましい効果を実現できることがわかりました。

これは「良い」CSSですか？より良い方法はありますか？3 つ以上の背景画像が必要な場合はどうすればよいでしょうか。

CSSではなくHTMLIMGタグを使用して画像を表示する方が適切なのはどのような状況background-imageですか。その逆も同様です。

要因には、アクセシビリティ、ブラウザサポート、動的コンテンツ、またはあらゆる種類の技術的制限やユーザビリティの原則が含まれる場合があります。

サイズ比が異なっていても、特定の幅と高さの URL からの画像を表示したい。そのため、サイズを変更して（比率を維持して）、画像を必要なサイズにカットしたいと考えています。

htmlimgプロパティでリサイズ、 でカットできbackground-imageます。
どうすれば両方を行うことができますか?

例：

この画像：

サイズがピクセルで、ピクセル800x600の画像のように表示したい200x100

img私は画像のサイズを変更でき ます200x150px：

それは私にこれを与えます：

そして、画像のピクセルbackground-imageを切り取ることができます。200x100

私に与えます：

どうすれば両方を行うことができますか?
画像のサイズを変更してから、必要なサイズにカットしますか?

このようなCSSで：

の背景画像の読み込みを遅らせて、HTML 内のすべての画像と他のすべての CSS 背景 (と)#big-menuを含む他のすべての後に読み込まれるようにする方法はありますか?some-menusome-other-menu

その理由は、big-menu.jpg のサイズが非常に重いため、最後にロードする必要があるためです。結局のところ、それは単に目を楽しませるだけであり、それよりも優れた用途を持つ他の背景画像があります. (ボタンに使われているものなど)

CSS に配置する順序または#big-menuHTML のマークアップ () の出現は、最初に読み込まれるものと関係がありますか? またはそれを制御するためのより信頼できる方法はありますか? javascript (jQuery を推奨) で問題ありません。

最後の手段として、stackoverflowを適用します。リンクの背景にある画像を使用しているときに、この ie6 バグが発生しました。ie6 は背景をスクロールするようです。どうすれば回避できますか？

一部の幅では、次のように表示されます:
alt テキスト http://img135.imageshack.us/img135/8849/badie1.png

そして、別の場所では次のように表示されます:
代替テキスト http://img522.imageshack.us/img522/8180/badie2.png

IE7 と FF では、期待どおりに次のように表示されます。
代替テキスト http://img142.imageshack.us/img142/2296/goodie.png
リンクは、右側に浮いている div 内に配置されます。

どうすればこれを回避できますか？