Html 如何使用 CSS 拉伸表格单元格的背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3388360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stretch background image of a table cell with CSS?
提问by SilverLight
How can I stretch background image of a table cell with CSS? I have Googled it with no results.
如何使用 CSS 拉伸表格单元格的背景图像？我用谷歌搜索，没有结果。
When you set background image of a cell and the background size is smaller than the cell, then it will be repeated.
当您设置单元格的背景图像并且背景尺寸小于单元格时，它将被重复。
How can I force this background to stretch the entire table cell instead?
如何强制此背景拉伸整个表格单元格？
采纳答案by Guffa
You can't stretch a background image.
您不能拉伸背景图像。
If you want to stretch an image, you have to put it in an imgtag. You can use absolute positioning to put content on top of the image.
如果要拉伸图像，则必须将其放入img标签中。您可以使用绝对定位将内容放在图像的顶部。
回答by Pekka
It is possible to stretch a background image using the background-sizeCSS property.
可以使用background-sizeCSS 属性拉伸背景图像。
Examples:
例子：
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 */
All major current browsers support the feature:
当前所有主要浏览器都支持该功能：
- IE since 9.0
- Chrome since 3.0
- Firefox since 4.0
- Opera since 10.0
- Safari since 4.1
- 从 9.0 开始的 IE
- 从 3.0 开始的 Chrome
- Firefox 自 4.0
- 从 10.0 开始的歌剧
- 自 4.1 以来的 Safari
回答by Michael
It is possible.
有可能的。
NOTE: This is using CSS3 and will not be supported by inferior browsers.
注意：这是使用 CSS3，劣质浏览器将不支持。
If you set your cell with this styling it should solve your problem. It will also allow for collapsible tables too because you're using %.
如果您使用这种样式设置单元格，它应该可以解决您的问题。它也将允许折叠表，因为您使用的是 %.
background-image: url('XXX');
background-repeat: no-repeat;
background-size: 100% 100%;
