Question

我有这个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>

但图片未显示 - 以下是一个示例： http://jsfiddle.net/42usL/

Answer 1

您的图片正在加载，但<div>元素太小而无法看到。

更改为：

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

看到它。 Here is an updated fiddle

此外，您有多个具有相同ID的<div>元素。根据{{3}}，这不是有效的文件。

Answer 2

尝试添加background-size: contain;或background-size: 30px 30px;

背景图片的大小不是很大，所以你只能看到它们中的一小部分。

Fiddle using "contains"

Fiddle using "pixel size"

#type_box {
    width:30px;
    height:30px;
    margin-right:5px;
    border-radius:20px;
}
.box_okay {
    background:url(http://s22.postimg.org/o4zp9zeu5/tick.png) no-repeat;
background-size: contain;
}
.box_none {
    background:#000000;
}
.box_Warning {
    background:url(http://s22.postimg.org/o4zp9zeu5/tick.png) no-repeat;
background-size: contain;
}
.box_Error {
    background:url(http://s8.postimg.org/juv72insx/cross.png) no-repeat;
background-size: contain;
}
.box_Maintenance {
    background:url(http://s22.postimg.org/d6ofrsq8t/spanner.png) no-repeat;
background-size: contain;
}

CSS Div上没有显示的背景图片

2 个答案: