0

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

4

2 回答 2

5

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

改成：

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

看见了。这是一个更新的小提琴。

此外，您有多个<div>具有相同 ID 的元素。根据规范，这不是一份有效的文件。

于 2013-10-15T12:15:58.183 回答
1

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

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

小提琴使用“包含”

小提琴使用“像素大小”

#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;
}
于 2013-10-15T12:16:36.300 回答