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;
}

当我部署项目时，图像显示为空白。图片的 url 没有损坏，因为如果我在 chrome 浏览器中使用 inspect element 并转到 resources 我可以看到图片已加载。

Answer 1

我在我的流星“排行榜”项目中遇到了类似的问题，页面正文的背景图像（本地文件）。 解决方案是在我的项目中创建一个名为“public”的文件夹并将背景图像放入其中。这样背景就可以被流星http://localhost:3000/bg.jpg访问

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

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

Answer 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 目录根目录的图像，上述结果如下：

Answer 3

不要忘记height 值：

height: 30px;

当您在 CSS 中使用背景图片时，图片不会占用空间。你必须明确告诉 div 它应该有多大。尤其是当里面什么都没有的时候。不管你想用它做多大的高度，我都设置了 30px。

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