背景图像的 HTML 代码以适应表格的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7220133/
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
An HTML code for a background image to fit the size of the table
提问by brilliant
Which code in HTML will allow me to use an image as a background image for a table, but not so that it would be repeated several times vertically and horizontally (in case the table is several times bigger than the image), but in such way that the image height is stretched out to be equal to the height of the table, and its width is stretched out to be equal to the width of the table?
HTML 中的哪些代码将允许我使用图像作为表格的背景图像，但不能在垂直和水平方向重复多次（以防表格比图像大几倍），但以这种方式图像高度被拉伸到等于桌子的高度，它的宽度被拉伸到等于桌子的宽度？
回答by Facebook Staff are Complicit
The CSS background options can't handle this reliably across browsers, so you need to put an <img>tag in the table and position it appropriately. As Petr Marek alluded to in the comments, you can do this with the CSS attributes z-indexand position, but it's not elegant.
CSS 背景选项无法跨浏览器可靠地处理此问题，因此您需要<img>在表格中放置一个标签并对其进行适当的定位。正如 Petr Marek 在评论中提到的，您可以使用 CSS 属性z-index和来做到这一点position，但这并不优雅。
If you set position: relativeon the table, you can set position: absoluteon the <img>with top: 0; height: 100%; left: 0; width: 100%;to position and size the image, and set z-index: -1to make it appear behind the other content.
如果设置position: relative在桌子上，你可以设置position: absolute在<img>与top: 0; height: 100%; left: 0; width: 100%;以位置和大小的图像，并设置z-index: -1使其出现其他内容的后面。
Here's a working example on jsFiddle.
Although it works perfectly for me in Chrome, since you're putting content on top of an image I wouldn't be surprised if it caused some browsers to mess up text selection or something else.
尽管它在 Chrome 中非常适合我，但由于您将内容放在图像之上，如果它导致某些浏览器弄乱文本选择或其他内容，我不会感到惊讶。
回答by Quentin
Presentation is the job of CSS, not HTML. You can use background-sizein supporting browsers.
表示是 CSS 的工作，而不是 HTML。您可以在支持的浏览器中使用background-size。
回答by Tieson T.
HTML stands for Hypertext Markup Language. It is not code.It is intended to provide semantic meaning and structure to a web-accessible document. Entities such as images are purely presentational cruft that was added because we got bored just reading text all day.
HTML 代表超文本标记语言。它不是代码。它旨在为可通过网络访问的文档提供语义含义和结构。诸如图像之类的实体纯粹是由于我们整天阅读文本而感到无聊而添加的。
That being said, you can use CSS to possibly achieve what you want, but it may be bit tricky. An idea that comes to mind is adding an image element to the page with a height and a width set to be 100% of its container, and then positioning your table, with a transparent background color, over it. You'll have to look into z-indexes, obviously.
话虽如此，您可以使用 CSS 来实现您想要的效果，但这可能有点棘手。想到的一个想法是向页面添加一个高度和宽度设置为其容器的 100% 的图像元素，然后将具有透明背景颜色的表格放置在其上。显然，您必须查看 z 索引。
