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。正因为如此，它height完全符合文本内容。

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