如何使用 CSS 拉伸表格单元格的背景图像？

Posted 2023-03-05

【中文标题】如何使用 CSS 拉伸表格单元格的背景图像？

【英文标题】：How to stretch background image of a table cell with CSS?

【发布时间】：2011-03-24 05:37:24

【问题描述】：

我用谷歌搜索了它，没有结果。

当你设置一个单元格的背景图片并且背景尺寸小于该单元格时，就会重复。

如何强制此背景拉伸整个表格单元格？

【问题讨论】：

对这个问题的公认答案不再正确 - 当前所有主流浏览器现在都支持通过 CSS 进行拉伸

【参考方案1】：

您不能拉伸背景图像。

如果要拉伸图像，则必须将其放入img 标记中。您可以使用绝对定位将内容放在图像顶部。

【讨论】：

但是我为表格创建了这个线程/绝对位置不适用于表格的背景图像/任何其他想法？

@LostLord：不，你根本无法拉伸背景图像，除非你想等到兼容 CSS 3 的浏览器变得更普遍。

还有一些 javascript 库可以执行此答案中描述的操作 :)

【参考方案2】：

可以stretch a background image using the background-size CSS property。

例子：

body  background-size: 100% auto  /* Stretches image to full horiz. width */
body  background-size: 50% 50%  /* Stretches image to half of available
width and height - WARNING: aspect ratio not maintained */

body  background-size: cover  /* Ensures that image covers full area */
body  background-size: contain  /* Ensures that image is completely visible */

当前所有主流浏览器都支持该功能：

IE 9.0 起 Chrome 自 3.0 起 Firefox 自 4.0 起 Opera 从 10.0 开始 自 4.1 起的 Safari

【讨论】：

背景尺寸非常非常有限/还有其他想法吗？

@LostLord 不是真的，不是没有复杂的 jQuery 解决方法。你需要做什么？

链接失效了。麻烦修一下好吗？

@MoonLight 你是有限的！ ;-） 对不起。你的评论很旧。现在支持非常好，背景大小可以挽救生命。

@ArmelLarcier 有很多使用旧浏览器的互联网用户......即使在 2016 年......你知道为什么吗？因为我（我自己）仍然有 Windows XP 3。它的浏览器......我有 IE7......我不喜欢升级......我认为 Windows 7 和 8 和......不好......在我认为一个软件起初很棒......但升级后......他们会向它们添加我不喜欢的额外代码......例如：检查Windows XP中的记事本并在Windows 7中检查它...如果您是专业人士和程序员...您会知道我为什么不升级...

【参考方案3】：

有可能。

注意：这是使用 CSS3，劣质浏览器不支持。

如果您使用此样式设置单元格，它应该可以解决您的问题。它也将允许折叠表，因为您使用的是 %.

background-image: url('XXX');
background-repeat: no-repeat;
background-size: 100% 100%;