Question

我一直试图将背景图像设置为css中的div，即

React.createElement("div", {className: "icon"})

.icon {
    background: url("../images/icons/icon.png") 0 0 no-repeat;
}

似乎没有显示任何内容。我还验证了图片位于正确的位置。

然而，当我将.icon设置为display: list-item，即

时

.icon {
    display: list-item;
    background: url("../images/icons/icon.png") 0 0 no-repeat;
 }

图像显示在页面上。是否有任何理由显示列表项工作，但没有别的吗？有没有办法让背景图像工作而不必使用display: list-item？

Answer 1

取决于：您的.icon DIV是否有任何内容？

因为，如果DIV不包含任何内容，则它没有大小（即高度为零），因此您将看不到背景图像。

但是，li默认情况下总是至少有一行高（即为其定义的行高）和100％宽，即使没有内容，所以你会看到一个背景-Image ...

Answer 2

尝试以下内容;

使用以下css代码创建div：

div {
  height: 400px;
  width: 400px;
  background-image: url("INSERT URL HERE");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

这应该在页面上创建一个完美的正方形，其中您在引文之间发布的图像作为其背景。

背景图像仅在将显示属性设置为列表项时有效

2 个答案: