0

このコードを html ファイルに入れると、問題なく動作します。

  <style type="text/css" media="screen">
    #headerimg 
    {
      display: block;
      background-image: url('/Content/images/epp/ebweblogo1.gif');
      background-repeat: no-repeat;
      background-position: center center;
            width:100%;
      height:100%;   
        margin: 0;
  padding: 0;
    }
  </style>

しかし、次のようにcssファイルに移動すると:

#headerimg 
    {
      display: block;
      background-image: url('/Content/images/epp/ebweblogo1.gif');
      background-repeat: no-repeat;
      background-position: center center;
            width:100%;
      height:100%;   
        margin: 0;
  padding: 0;
    }

これは私のhtmlです：

</head>
  <body>

    <div class="page">

      <div id="header">
      <div id="headerimg" />

画像の場所が原因だと思いますが、パスのバリエーションを試してみましたが、うまくいかなかったのでわかりません。

助言がありますか？

編集

すみません、あなたは私の心を読むことができません、私は知っています。

css を html ファイルに配置すると、画像が正常に表示されます。css ファイル (site.css) に移動すると、まったく表示されません。いくつかの異なるパスを試しましたが、そこに何を入れても表示されません。

更新 #2

HTMLをこれに変更すると：

<div class="page">

  <div id="header">
    <div id="headerimg">test</div>

テキストの背後にある画像を、テストを示す1行として取得していますが、画像のフルサイズではありません。

divのサイズが原因で画像が表示されないようですか？css を次のように変更しました。

高さ:130px;

しかし、それは高さをまったく変えませんでした。

4

3 に答える 3

5

CSS の 2 つのビットは同等ではありません。

1つには、 (クラス セレクター)#headerimgとは非常に異なるセレクターである (id セレクター) があります。.headerimg

#imgplacementも 2 番目のサンプルから欠落しています。

画像の問題については、画像ディレクトリへの正しいパスを確認する必要があります。

これは、CSS が存在する場所に対して相対的になりCSSます。ファイル内の場合、画像は CSS ファイルに対して相対的である必要があります。HTML に埋め込まれている場合は、HTML ファイルに対して相対的である必要があります。

パスはルート化されている (で始まる/) ため、どこでも機能するはずです。開発者ツールを使用して、画像を探している場所を特定します。

于 2012-12-26T09:50:34.283 に答える
0

このような<head></head>セクションの間にCSSファイルを含めます。HTML

<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />
于 2012-12-26T10:15:27.890 に答える
0

ホームページに次のような CSS を含めます。

<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />

次に、イメージのルートに注意してください。

于 2012-12-26T10:09:20.163 に答える