Html 背景图像未显示在CSS Div上

我有这个CSS代码：

#type_box {
    width:30px;
    height:30px;
    margin-right:5px;
    border-radius:20px;
}
.box_okay {
    background:url(/images/tick.png) no-repeat;
}
.box_none {
    background:#000000;
}
.box_Warning {
    background:url(/images/tick.png) no-repeat;
}
.box_Error {
    background:url(/images/cross.png) no-repeat;
}
.box_Maintenance {
    background:url(/images/spanner.png) no-repeat;
}

这个HTML：

<div id="type_box" class="box_okay"></div>
<div id="type_box" class="box_Warning"></div>
<div id="type_box" class="box_Error"></div>
<div id="type_box" class="box_Maintenance"></div>

---

但是图像没有显示-下面是一个示例：

您的图像正在加载，但是

元素太小，无法看到它

改为：

#type_box {
    width:100px;
    height:100px;
}

去看看吧

---

此外，您有多个具有相同ID的

元素。根据说明，这不是有效的文档。

您正在加载图像，但

元素太小，无法看到它

改为：

#type_box {
    width:100px;
    height:100px;
}

去看看吧

---

另外，您有多个具有相同ID的

元素。根据，这不是有效的文档。

请尝试添加

背景大小：contain或
背景尺寸：30px 30px

背景图像没有调整大小，因此您只能看到其中的一小部分



尝试添加
背景大小：contain或
背景尺寸：30px 30px

背景图像没有调整大小，因此您只能看到其中的一小部分



在您的JSFIDLE示例中一切都很好。是否检查了图像路径是否正确？ID对于页面上的单个元素应该是唯一的。你没有正确地使用它们
type_box
应该是一个类。在JSFIDLE示例中一切都很好。是否检查了图像路径是否正确？ID对于页面上的单个元素应该是唯一的。你没有正确地使用它们<代码>输入框
应为类。