背景图像的 HTML 代码以适合表格的大小答案

【问题标题】：An HTML code for a background image to fit the size of the table背景图像的 HTML 代码以适合表格的大小
【发布时间】：2011-11-05 09:58:06
【问题描述】：

HTML 中的哪些代码允许我将图像用作表格的背景图像，但不允许它在垂直和水平方向重复多次（如果表格比图像大几倍），但是以这种方式将图像高度拉伸为等于表格的高度，并将其宽度拉伸为等于表格的宽度？

【问题讨论】：

你一定没听说过 CSS。
您不能拉伸背景图像。你可以通过一些 woohoo z-index 和绝对定位的元素来做到这一点。
@Petr Marek - “woohoo z-index 和绝对定位元素” - 请您详细说明一下吗？什么是woohoo z-index？我在哪里可以找到有关它的更多信息？
@BoltClock - 好吧，我听说过一点 CSS，但我记得我偶然发现了“重复：不重复”，但我的背景图像仍然没有拉伸到足够的大小表。
@brilliant 正确的拼写是no-repeat - 也许这就是问题所在？

【解决方案1】：

CSS 背景选项无法跨浏览器可靠地处理此问题，因此您需要在表格中放置一个<img> 标记并适当定位它。正如 Petr Marek 在 cmets 中提到的那样，您可以使用 CSS 属性 z-index 和 position 来做到这一点，但这并不优雅。

如果你在桌子上设置position: relative，你可以在<img>上设置position: absolute和top: 0; height: 100%; left: 0; width: 100%;来定位和调整图片大小，设置z-index: -1让它出现在其他内容的后面。

虽然它在 Chrome 中非常适合我，但由于您将内容放在图像之上，如果它导致某些浏览器弄乱文本选择或其他内容，我不会感到惊讶。

【讨论】：

谢谢。我在不同的浏览器上检查了该链接。图片在 Chrome 中非常适合表格，它比 FireFox 中的表格大得多（实际上它占据了整个页面），而在 IE 中它只占表格的一半。

【解决方案2】：

演示是 CSS 的工作，而不是 HTML。您可以在supporting browsers 中使用background-size。

【讨论】：

【解决方案3】：

HTML 代表超文本标记语言。 它不是代码。它旨在为 Web 可访问的文档提供语义含义和结构。诸如图像之类的实体纯粹是因为我们厌倦了整天阅读文本而添加的。

话虽如此，您可以使用 CSS 来实现您想要的，但这可能有点棘手。想到的一个想法是向页面添加一个图像元素，其高度和宽度设置为其容器的 100%，然后将具有透明背景颜色的表格放置在其上方。显然，您必须研究 z-indexes。

【讨论】：