Question

我有一张桌子，我正在尝试应用背景图片，但它没有显示。图像路径正确（firebug表示图像已加载），表格大小与图像大小相同（156X46px）

HTML：

<!--hazard icons start here -->
                <table class="hazard-table">
                <tr> 
                    <td> 1 </td>
                    <td> 1 </td>
                    <td> 1 </td>

                </tr>
                <tr> 
                    <td> 1 </td>
                    <td> 1 </td>
                    <td> 1 </td>

                </tr>


                <!-- hazard icons end here -->
                </table>

CSS：

table.hazard-table {
    background:url('../images/icon-item.png') no-repeat;
    width:156px;
    height:46px;
    border-width: 1px;
    border-spacing: 2px;
    border-style: solid;
    border-color:#ebebeb;
    border-collapse: collapse;
    background-color: white;
}
table.hazard-table th {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: #ebebeb;
    background-color: white;
    -moz-border-radius: ;
}
table.hazard-table td {
    background-position:30 20 ;
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: #ebebeb;
    background-color: white;
    -moz-border-radius: ;
}

Answer 1

table.hazard-table {
    background:url('../images/icon-item.png') no-repeat;
    width:156px;
    height:46px;
    border-width: 1px;
    border-spacing: 2px;
    border-style: solid;
    border-color:#ebebeb;
    border-collapse: collapse;
    background-color: white;
}

这：

background-color: white;

使用白色背景覆盖图像。你应该这样做：

  table.hazard-table {
        background:white url('../images/icon-item.png') no-repeat;
        width:156px;
        height:46px;
        border-width: 1px;
        border-spacing: 2px;
        border-style: solid;
        border-color:#ebebeb;
        border-collapse: collapse;
}

编辑：

试试这个：

  table{
.hazard-table {
    background:white url("../images/icon-item.png") no-repeat;
    width:156px;
    height:46px;
    border-width: 1px;
    border-spacing: 2px;
    border-style: solid;
    border-color:#ebebeb;
    border-collapse: collapse;


    th{
        border-width: 1px;
        padding: 1px;
        border-style: inset;
        border-color: #ebebeb;
        background-color: white;
        -moz-border-radius: ;
        } 

        td{
           background-position:30 20 ;
           border-width: 1px;
           padding: 1px;
           border-style: inset;
           border-color: #ebebeb;
           background-color: white;
           -moz-border-radius: ;
       }
}

Answer 2

}
table.hazard-table td {
    background-position:30 20 ;

作为首发，背景位置必须是像素，或“中心”等。

}
table.hazard-table td {
    background-position:30px 20px ;

这可能会解决问题。

Answer 3

希望 fiddle 链接适合您。

  table.hazard-table {
   /* background:url('../images/icon-item.png') no-repeat 0 0;*/
    background:url('http://img.talkandroid.com/uploads/2013/03/wpid-photo-jan-14-2013-1115-am.jpg') no-repeat 0 -550px;
    width:156px;
    height:46px;
    border-width: 1px;
    border-spacing: 2px;
    border-style: solid;
    border-color:#ebebeb;
    border-collapse: collapse;
    /* background-color: white;*/
}
table.hazard-table th {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: #ebebeb;
    background-color: white;
    -moz-border-radius: ;
}
table.hazard-table td {
    background-position:30 20 ;
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: #ebebeb;
   /* background-color: white;*/
    -moz-border-radius: ;
}

为什么不显示表背景？

3 个答案: