td 中的 css 3 图像答案

【问题标题】：css 3 images in tdtd 中的 css 3 图像
【发布时间】：2011-04-19 07:42:28
【问题描述】：

我无法将 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>

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

【问题讨论】：

你在什么浏览器中尝试这个？这是相对较新的，尚未在所有浏览器中完全支持。图片存在吗？

标签： html css image html-table

【解决方案1】：

唯一具有此功能的浏览器项目到目前为止实现的功能是 WebKit 和 KHTML（Konqueror）。这进入 Safari 1.3，但可以在 OmniWeb 5.5 及更高版本。

Source

【讨论】：

【解决方案2】：

试试

.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的图片上添加链接。

【讨论】：

【解决方案3】：

在同一元素中有多个背景图像和当前限制已在此处得到解答：layering-images-in-css-possible-to-put-2-images-in-same-element 和此处：an-i-have-multiple-background-images-using-css

目前并非所有浏览器都支持上述链接答案中所述的功能。还有一些变通方法的建议，例如使用多个 div 并将每个图像放入自己的 div 中，并根据需要使用 z-orders 来显示 div。

【讨论】：