html - 单元格不显示背景图像

Question

我有一个表格代码，其中有三个单元格。我希望每个单元格都有不同的背景图像。但问题是，只有第一个单元格显示图像!请帮忙!我的代码:

我更改了#topbar td 宽度!

成功代码:

#topbar {
        width: 100%;
        color: transparent;
        font-size: 13px;
        border-spacing: 0px;
        white-space: nowrap;
    }
    #topbar td {
        width: 8.33333%;
        margin: 0px;
        padding: 0px;
    }
    #topbar td {
        height: 15px;
        margin: 0px;
        background-color: transparent;
        white-space: nowrap;
        cursor: pointer;
    }
    #topbar td:hover {
        background-color: transparent;
    }
    #topbar td.selected {
        font-weight: bold;
        color: #FFFFF;
    }
    #topbar td.empty {
        cursor: auto;
    }
    #topbar td.empty:hover {
        background-color: #2d2d2d;
    }
    #topbar td span {
        display: image;
    }

旧代码在标题中

#topbar {
    width: 100%;
    color: transparent;
    font-size: 13px;
    border-spacing: 0px;
    white-space: nowrap;
}
#topbar td {
    width: 100%;
    margin: 0px;
    padding: 0px;
}
#topbar td {
    height: 15px;
    margin: 0px;
    background-color: transparent;
    white-space: nowrap;
    cursor: pointer;
}
#topbar td:hover {
    background-color: transparent;
}
#topbar td.selected {
    font-weight: bold;
    color: #FFFFF;
}
#topbar td.empty {
    cursor: auto;
}
#topbar td.empty:hover {
    background-color: #2d2d2d;
}
#topbar td span {
    display: image;
}

在正文中:

<table id="topbar">
    <tr>
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBarMain.PNG) no-repeat">
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar.PNG) no-repeat">
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar2.png) no-repeat">
    </tr>
</table>

Answer 1

所有显示的图像都在彼此之上，因此您只能看到第一个。

不确定您希望它们如何显示，但是将 display:block; 添加到 #topbar td 规则将阻止它们彼此重叠

编辑:如果您希望在同一行显示它们，您需要为每个 TD 元素指定一个宽度值。当前设置的 100% 值占据了整个屏幕，因此遮挡了其他 TD 元素的 View

示例:http://jsfiddle.net/mZEWN/