javascript - React js css类背景图片不可见

Question

我在 React 组件中添加了一个类。
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。因此，它的高度正好适合文本内容。

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