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

Question

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

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

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

Answer 1

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

例子：

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%;