如何用CSS扩展表格单元格的背景图像?

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?

我怎么能强迫这个背景来拉伸整个表格单元格呢?

3 个解决方案

#1

You can't stretch a background image.

你不能拉伸背景图像。

If you want to stretch an image, you have to put it in an img tag. You can use absolute positioning to put content on top of the image.

如果你想拉伸一个图像，你必须把它放在img标签中。您可以使用绝对定位将内容放在图像的顶部。

#2

It is possible to stretch a background image using the background-size CSS property.

可以使用背景大小的CSS属性来拉伸背景图像。

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
即自9.0年
Chrome since 3.0
Chrome 3.0以来
Firefox since 4.0
Firefox 4.0以来
Opera since 10.0
Opera 10.0以来
Safari since 4.1
Safari 4.1以来

#3

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

#1