1

Web アプリケーションで CSS スプライトを使用しようとしています。これが私のWebレイアウトです：

<div id="container">
  <div id="header" /> <!-- part of CSS sprite --><br />
  <div id="content" /> <!-- repeats vertically, separate image --> <br />
  <div id="separator"> <!-- part of CSS sprite --><br />
  <div id="footer"> <!-- part of CSS sprite --><br />
</div>

私はこのcssを使用してみました：

#container {
  background: url(../img/sprite.png) no-repeat top;
  margin: 0px auto;
  width: 800px;
}

#container #header {<br />
  background-position: 0px 0px;
  height: 25px;
}

#container #content {<
  background: url(../img/content.png) repeat-y;
}

#container #separator {
  background-position: 0px -25px;
  height: 25px;
}

#page-container #footer {
  background-position: 0px -50px;
  height: 25px;
}

ここでは、上位 2 つの div (ヘッダーとコンテンツ) のみが表示されます。セパレーターとフッターは表示されません。Firebug をチェックインすると、表示されないだけで、そこにあることがわかります。

この行を追加すると、トリックが実行されます。

#container, #header, #footer, #separator {
  background: url(../img/sprite.png) no-repeat top;
}

では、なぜこれが起こっているのですか？div親コンテナーに既に設定されている場合でも、使用するたびにスプライト画像を配置する必要がありますか?

ヴィクラムに関して

4

2 に答える 2

6

背景プロパティは継承されません（継承された場合にどうなるか想像してみてください）。あなたはそれを使用するすべてのdivにそれを置くことができます。または、background-imageを使用することもできます。inherit; CSSルール

于 2010-06-04T10:20:06.103 に答える
0

トライ＆チェンジ

  <div id="separator"> <!-- part of CSS sprite --><br />
  <div id="footer"> <!-- part of CSS sprite --><br />

to

  <div id="separator"/> <!-- part of CSS sprite --><br />
  <div id="footer"/> <!-- part of CSS sprite --><br />
于 2010-06-04T10:15:59.007 に答える