不显示背景图片

Question

我正在开发vue.js中的组件，但有一个问题，该图片未显示在以下标记中：

<b-icon v-if="displayShowHistory && checkRole('showHistory')" class="backlight show-modal-icon" id="historyDoc" @click="showHistory"></b-icon>

.b-icon#historyDoc {
  background: url("../assets/history.png") center;
  background-size: contain;
  width: 32px;
}

在这种情况下，图像将以以下样式显示在控制台中：

如何使图像正确显示在页面上？现在什么也没有显示。

Answer 1

您的背景图像的尺寸较大。 添加background-size: cover;属性

Answer 2

我认为您的问题是您缺少height css属性。假设这是一个块元素，则除了宽度外，还需要它。否则，您的元素的高度将为0，实际上意味着不会显示任何背景。

.b-icon#historyDoc {
  background: url("../assets/history.png") center;
  background-size: contain;
  height: 32px;
  width: 32px;
}

如果这是一个内联元素，则可能还需要添加display: block;。