CSS背景圖片未與流星一起顯示

Question

我正在嘗試根據他們網站上的排行榜示例創建一個簡單的流星項目。 我想在每個玩家的得分旁邊添加一個小圖標。 為此，我創建了一個名為public的文件夾，並在其中放置了test.png圖像。 在.player .score的css中，我將圖像添加為背景圖像，但它看起來不是這樣

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

當我部署項目時，映像顯​​示為空白。 圖片的網址未損壞，因為如果我在chrome瀏覽器中使用inspect element並轉到resources ，則可以看到圖片已加載。

Answer 1

兩件事情。

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目錄根目錄下的圖像，以上結果是這樣的：

Answer 2

我在流星“排行榜”項目中遇到了類似的問題，頁面背景為背景圖像（本地文件）。 解決方案是在我的項目中創建一個名稱為“ public”的文件夾，並將背景圖像放入其中。 這樣流星就可以訪問背景http://localhost:3000/bg.jpg

之后，我可以像往常一樣在我的CSS代碼中使用它：

body {
  background: url(bg.jpg) no-repeat fixed;
}

Answer 3

不要忘記height值：

height: 30px;

在CSS中使用背景圖片時，該圖片不會占用空間。 您必須明確告訴div應該有多大。 尤其是當其中沒有任何東西時。 無論您希望它使用多大作為高度，我都設置了30px。

更新：我已經仔細檢查了這是否可行：這是屏幕截圖：