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

Question

如何使用CSS拉伸表格单元格的背景图像？我用Google搜索了没有结果。

当你设置一个单元格的背景图像并且背景尺寸小于单元格时，它将被重复。

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

Answer 1

可以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

Answer 2

您无法拉伸背景图像。

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

Answer 3

有可能。

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

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

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