1

mvc 4の基本テンプレートを使用しています。div要素の背景画像を設定します。「〜/Content」ディレクトリにあるスタイルシート。これは、cssなしで画像を直接指定しようとしている.cshtmlファイルの一部です。

        <div id="add_image" class ="image_bar" style="background-image:url(add.jpg)" ></div>

これが私のCSSです：

#add_image {
    background-image:url('~/add.jpg');
}

#add_image:hover {
    background-image:url('~/addhover.jpg');
}
.image_bar {
    width:40px;
    height:40px;
}

cssも直接の「スタイリング」も機能しません-何が問題なのですか？ありがとう。

4

4 に答える 4

6

2番目の例では、「〜/」モニカを使用しています。これは、サイトのルートを調べるようにコードに指示する.NETのものです。.NETエンジンはCSSファイルを処理しないため、「〜/」は効果がなく、サーバーに対して非常に醜いHTTPリクエストを行う可能性があります。

コンテンツディレクトリにCSSがあるため、1つの解決策は、コンテンツに「images」というサブディレクトリを作成することです。すべてのCSS画像をそのフォルダーに保存します。次に、CSSファイルから、そのファイル内の画像を次のように呼び出して参照できます。

#add_image {
    background-image:url('images/add.jpg');
}

#add_image:hover {
    background-image:url('images/addhover.jpg');
}

これは、次のようなディレクトリ構造を想定しています。

  • コンテンツ
    • 画像
      • add.jpg
      • addhover.jpg
    • site.css

私はデザイナーではありませんが、CSSは、HTMLのようなWebアプリケーションのルートではなく、CSSファイルの場所に関連する画像を検索すると思います。さらに、CSSファイルと同じディレクトリに画像を保存した場合は、「images/」プレフィックスなしでそれらの画像を呼び出すことができるはずです。ただし、ほとんどの場合、リソースを分離しておくのが好きです。

于 2013-01-27T16:52:54.817 に答える
0

それ以外の

background-image：url（'〜/ add.jpg'）;

使ってみてください

background-image：url（'./ add.jpg'）;

于 2013-10-31T19:15:10.173 に答える
0

で試してみてください

background-image:url('../add.jpg');

于 2014-02-17T09:23:17.047 に答える
0

この**例を試してください-

background-image:url('../img/home_bg.jpg');**

background-image:url('../**ImageFolderName**/add.jpg');
于 2015-11-12T09:40:52.987 に答える