CSS背景图像不会与流星一起显示

Question

我正在尝试根据其网站中的leaderboard example创建一个简单的流星项目。我想在每个玩家的分数旁边添加一个小图标。为此，我创建了一个名为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

我的流星＆＃34;排行榜＆＃34;我有类似的问题。项目与页面正文的背景图像（本地文件）。 解决方案是创建一个名为＆＃34; public＆＃34;在我的项目中，并将背景图像放入其中。这样，meteor http://localhost:3000/bg.jpg

就可以看到背景

之后我就像往常一样在我的CSS代码中使用它：

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

Answer 3

不要忘记height值：

height: 30px;

在CSS中使用背景图像时，图像不会占用空间。你必须告诉div它应该有多大。特别是当它什么都没有的时候。不管怎样，你想把它作为高度使用，我只需要提高30px。

更新：我已经仔细检查了这是否有效：这是截图：