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

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

4

3 回答 3

3

两件事情。

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 回答
1

不要忘记height价值：

height: 30px;

在 CSS 中使用背景图像时，图像不会占用空间。你必须明确告诉 div 它应该有多大。尤其是当里面什么都没有的时候。无论您希望它多大，都可以使用它作为高度，我刚刚设置了 30px。

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

在此处输入图像描述

于 2013-09-05T17:44:24.067 回答