Question

我在反应组件中添加了一个类 CSS文件：

.bg{
   background: url('../img/bg.jpg');
   border: 2px solid black;
}

React渲染方法：

  render() {
   return (
    <div>
      <div className="bg">
       Hey This
      </div>
    </div>
  );
}

浏览器显示边框并加载图像但图像不可见。

截图如下：

谁能告诉我我做错了什么？

Answer 1

这很有可能发生，因为div.bg没有指定height。因此，其height完全适合文本内容。

任何大小的背景图像都不会影响其父元素的大小。如果您的目标是能够看到整个图像，则需要为height指定与原始图像的高度匹配的div.bg。

Answer 2

您的.bg div目前的大小为0x0像素，这就是图片未显示的原因。指定宽度和高度以查看图像。

例如：

.bg {
    height: 300px;
    width: 300px;
}

或者更优选地使用100%使整个图像适合div。

.bg {
    height: 100%;
    width: 100%;
}

作为旁注：确保您的背景图像不是太大并且需要很长时间才能加载。大背景图像大小会导致非常糟糕的用户体验。考虑使用png图像，带有repeat属性的小图像或svg。

Answer 3

background-size: contain;

不确定图像是什么，但这会使图像的大小适合文本定义的当前div高度。

Answer 4

尝试将背景更改为background-image。同时为bg类提供高度和宽度。然后最后指定background-size可能涵盖。一个例子看起来像

.bg {
  background-image: url('../img/bg.jpg');
  background-size: cover;
  border: 2px solid black;
  height: 300px;
  width: 300px;
}

这应该像我试过的那样起作用。

Answer 5

将img文件夹放在公共文件夹

中

.css
background: url('/img/bg.jpg');

或

.js
var logo=require("../img/Logo.svg");
<img src={logo} alt="logo"/>

Answer 6

您是否尝试过从 background: url('/img/bg.jpg'); 至 background-image: url('/img/bg.jpg');

Answer 7

设置高度非常重要，但不能设置为％

由 Yuval 提供的示例是正确的，并且运行良好。

.bg {
   height: 300px;
   width: 300px;
}