Question

我有一个表格单元格，在该单元格中我想在2个不同的位置显示2个不同的背景图像。我正在使用

<table border="0" cellspacing="0" cellpadding="0" width="100" height="100">
 <tr>
   <td id="arrow" class="top">&nbsp;</td>
</tr>
<tr>
  <td id="arrow" class="mid">&nbsp;</td>
</tr>
<tr>
 <td id="arrow" class="bottom">&nbsp;</td>
</tr> 
</table>

css是：

td#arrow.top{
    background-image: url('images/pic1.jpg'), url('images/pic2.jpg');
    background-position: left top, center center;
}

如何使用CSS显示2个单独的背景图像，以便它们显示在IE 6中。

Answer 1

一个元素上不能有2个背景图像。您需要在单元格中创建另一个元素（可能与单元格本身具有相同的尺寸）并在每个元素上设置一个背景：

<td>
    <div class="td-container">
    </div>
</td>

td {
    background: url(/img/bg1.jpg) left top no-repeat;
}
.td-container {
    background: url(/img/bg2.jpg) right bottom no-repeat;
}

或者，您可以创建一个图像，将所有位置的图像组合在一起，并将其作为背景。

Answer 2

您需要使用div来分隔图像。可以尝试类似

的尝试

<td><div class="top"></div></td>

然后你的CSS会有

top.td
{
background: whatever.jpg;
}

在IE 6中使用CSS显示两个背景图像

2 个答案: