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

Question

如何使用CSS拉伸表格单元格的背景图像？我通过谷歌搜索没有找到结果。

当您设置单元格的背景图像并且背景大小小于单元格时，它会被重复。

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

- SilverLight

---

问题的被采纳答案现在不再正确 - 所有当前主要的浏览器都支持通过CSS进行伸展。 - Pekka

Answer 1

可以使用CSS属性background-size来拉伸背景图片。

示例：

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 及以上版本
• Safari 4.1 及以上版本

- Pekka

---

背景大小非常有限，还有其他的想法吗？ - SilverLight

@LostLord，不是没有，但需要使用复杂的 jQuery 解决方案。你需要做什么？ - Pekka

链接已经失效了，请修复一下，好吗？ - zbr

@MoonLight 你被限制了！;-) 抱歉，你的评论已经过时。现在支持非常好，background-size 是一个救星。 - Armel Larcier

@ArmelLarcier 许多互联网用户仍在使用旧版浏览器，即使在2016年也是如此。你知道为什么吗？因为我（我自己）仍在使用Windows XP 3，和它的浏览器IE7。我不喜欢升级，我认为Windows 7和8等系统并不好用。在我看来，一个软件一开始很好，但是在升级之后，会添加一些我不喜欢的额外代码，例如：比较一下Windows XP中的记事本和Windows 7中的记事本就能明白为什么我没有升级了，如果你是专业的程序员，你就会知道为什么。 - Mahdi Jazini

Answer 2

背景图片不能被拉伸。

如果你想要拉伸一张图片，你需要把它放在一个img标签中。你可以使用绝对定位将内容放在图片上方。

- Guffa

---

我创建这个线程是为了讨论表格和绝对定位，而不是用于表格背景图片。还有其他想法吗？ - SilverLight

@LostLord：不，你不能简单地拉伸背景图像，除非你想等到CSS 3兼容浏览器更加普及。 - Guffa

还有一些 JavaScript 库可以实现这个答案所描述的功能 :) - MarioRicalde

Answer 3

这是可能的。

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

如果您使用此样式设置单元格，则可以解决问题。它还允许可折叠表，因为您正在使用%。

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

- Michael