css 3图片在td

Question

我在将3张图片添加到CSS的表格单元时遇到问题，并且想知道是否有人可以帮助我弄清楚我在做什么错。 这是我所拥有的：

CSS

.Example {
        background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
    background-position: top left, top center, top right;
    background-repeat: no-repeat, repeat-x, no-repeat;
}

HTML

<td class="Example">
    <a href="example">Example</a>
</td>

但是，当我打开页面时，我得到的只是一个显示“示例”的单元格，没有背景图像。 有什么建议么？

Answer 1

尝试

.Example {
background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
background-position: top left, top center, top right;
background-repeat: no-repeat;
}

没有关于背景重复的三个参数。

请记住，这并非在所有浏览器上都有效。

我建议您使用旧的方式来解决此问题。 在每张具有相同href的图片上放置一个链接。

Answer 2

到目前为止，唯一实现了此功能的浏览器项目是WebKit和KHTML（Konqueror）。 但是，它已进入Safari 1.3，并且可以在OmniWeb 5.5及更高版本中使用。

资源

Answer 3

在相同的元素拥有多个背景图像和当前的限制已经在这里找到答案： 分层图像功能于CSS-可能到把-2图像功能于同一元素和这里： 一个-I-享有以下权利─多背景图像，使用-CSS

当前，并非所有浏览器都支持上述链接中的答案中所述的功能。 也有一些解决方法的建议，例如使用多个Div，并将每个图像放入其自己的div中，并根据需要使用z顺序显示div。