2

サイトのリーダーボードの例に基づいて、簡単な隕石プロジェクトを作成しようとしています。各プレイヤーのスコアの横に小さなアイコンを追加したいと思います。そのために、という名前のフォルダーを作成し、そこに画像publicを配置しました。test.pngのcssで.player .score、画像を背景画像として追加しましたが、このようには見えません

.player .score {
   background-image: url('test.png');
   display: inline-block;
   width: 100px;
   text-align: right;
   font-size: 2em;
   font-weight: bold;
   color: #777;
}

プロジェクトをデプロイすると、イメージが空白になります。inspect elementクロムブラウザで使用してに行くとresources、画像が読み込まれたことがわかるため、画像のURLは壊れていません。

4

3 に答える 3

3

2つのこと。

1) リーダーボードの例では、背景を.player .score子孫セレクターに追加すると、画像がスコアの隣ではなくスコアの下に配置されることに注意してください。スコアの横に画像を配置するには、空のスパンをplayerテンプレートに追加します。

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
    <span class="icon"></span>
  </div>
</template>

2) スパンと背景画像にサイズを追加する必要があります。CSS で、画像のスパンを個別にスタイルします。

.icon{
    background-image: url('test.png');
    background-size: 40px 40px;
    background-repeat:no-repeat;
    width: 40px;
    height: 40px;
    display: inline-block;
}

ディレクトリのルートに配置されたイメージのpublic場合、上記の結果は次のようになります。

ここに画像の説明を入力

于 2013-09-06T09:31:44.203 に答える
2

ページ本体の背景画像（ローカルファイル）を使用した流星の「リーダーボード」プロジェクトで同様の問題が発生しました。解決策は、プロジェクト内に「public」という名前のフォルダーを作成し、その中に背景画像を入れることでした。このようにして、背景は流星によって到達可能になりますhttp://localhost:3000/bg.jpg

その後、いつものように CSS コードで使用できました。

body {
  background: url(bg.jpg) no-repeat fixed;
}
于 2014-09-19T08:56:36.540 に答える