如何用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%;