1

我有一个表格，我正在尝试应用背景图像，但它没有显示。图像路径正确（萤火虫说图像已加载）并且表格大小与图像大小相同（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: ;
}
4

3 回答 3

2 
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: ;
       }
}
于 2013-07-08T07:06:29.350 回答
1 
}
table.hazard-table td {
    background-position:30 20 ;

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

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

这个“可能”解决了这个问题。

于 2013-07-08T07:05:16.580 回答
1

希望这个小提琴链接对你有用。

  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: ;
}
于 2013-07-08T07:13:27.957 回答