背景图像不在 div 元素中呈现答案

【问题标题】：Background image does not render within div element背景图像不在 div 元素中呈现
【发布时间】：2022-01-05 17:25:31
【问题描述】：

我似乎无法让这个背景图像在我的 Angular 组件中呈现。

html

 <div class="bkg"></div>

scss

.bkg {
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/welcome-pic.png");
  background-size: 100% 100%;
  background-position: top center;
 }

我可以在 chrome 开发工具中看到它。路径没有问题，加载正常。它只是不会显示在 UI 中。

你有什么想法吗？

【问题讨论】：

标签： angular sass

【解决方案1】：

您将背景图像放在空 div 的内容上，因此不会显示任何内容。至少把那个 div 放在父 div 里面，并给父 div 的高度和宽度。

【讨论】：

感谢这是正确的方法。我还需要在 body 上设置一些尺寸。

【解决方案2】：

最终起作用的是确保父 div 或 body 具有指定尺寸。否则，什么都不会渲染。

.bkg {
 width: 100%;
 height: 100%;
 background-image: url("~src/assets/welcome-pic-2.png");
 background-size: 100% 100%;
}

.container {
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  height: 100%;
}

如果没有容器，则将维度添加到body。

html, body {
  margin:0px;
  width: 100%;
  height:100%;
}

此资源有所帮助。 div height full screen

【讨论】：