HTML / CSS - 如何为整个表格设置一张背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19303627/
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
HTML / CSS - how to have one background image for entire table
提问by user2719875
EDIT: okay turns out it was browser issues. Hopefully someone can close this before I get even more negative votes -.-
编辑：好吧，原来是浏览器问题。希望有人能在我得到更多反对票之前关闭它-.-
I want a dark colored image as the background of my table, with the font and border lines to be a light color, say white. Here is my HTML
我想要一个深色图像作为我的桌子的背景，字体和边框线是浅色，比如白色。这是我的 HTML
<table>
<tr>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
</tr>
</table>
and here is my CSS
这是我的 CSS
table {
background:url(../images/bgimage.jpg);
background-repeat:no-repeat;
background-position:center center;
width:180px;
height:200px;
border:1px solid black;
width:180px;
height:200px;
}
however, this is not working and it is not placing any image onto the screen. How come? I even tried placing !important at the end, like so
然而，这不起作用，它没有将任何图像放置在屏幕上。怎么来的？我什至尝试将 !important 放在最后，就像这样
background:url(../images/15387_isopropyl_alcohol.jpg) !important;
but I still got nothnig Is it supposed to work? If it is, then I guess I will ahve to go through my entire code again and see if anything is wrong.. Is there another way to place a background image behind the table? I was thinking putting the table in a div and then giving the div a background image and then making the position absolute but that didn't work either, the image didn't even show up for some reason again.
但我仍然没有得到它应该工作吗？如果是，那么我想我将再次检查我的整个代码，看看是否有任何问题......还有其他方法可以在桌子后面放置背景图像吗？我想把桌子放在一个 div 中，然后给 div 一个背景图像，然后使位置绝对，但这也不起作用，图像由于某种原因甚至没有再次出现。
回答by Pricey
Try putting your table inside a <div>and set the background on the <div>instead.
试着把你的桌子放在 a 里面，<div>然后在 a 上设置背景<div>。
UPDATE:
更新：
The divsuggestion was just to get a quick fix but it all depends on whether your image reference is even working and also what your trying to do and why you are even using an background image in the first place.
该div建议只是为了快速修复，但这完全取决于您的图像参考是否有效，以及您尝试做什么以及为什么您甚至首先使用背景图像。
You end up having to force a table to be the same size as the image or repeat the image (which may or may not be what you want) or use background-size: contain;to scale the image to fit inside the <div>or use background-size: cover;to scale the image to the size of the <div>, these last 2 only works in more modern browsers.
您最终不得不强制表格与图像大小相同或重复图像（这可能是也可能不是您想要的）或用于background-size: contain;缩放图像以适应内部<div>或用于background-size: cover;将图像缩放到大小其中<div>，最后两个仅适用于更现代的浏览器。
This fiddle example fixes the table to within the width and height you specified. You can still apply the background image to the table, this is an example of doing it with a wrapping <div>so you could also put other elements infront of the background if necessary.
这个小提琴示例将表格固定在您指定的宽度和高度范围内。您仍然可以将背景图像应用到表格，这是一个使用环绕的示例，<div>因此您也可以在必要时将其他元素放在背景前面。
html:
html：
<div class="theme">
<table class="theme-table">
<tr>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
</tr>
</table>
</div>
css:
css：
.theme-table, .theme {
height: 200px;
width: 180px;
}
.theme-table {
border:1px solid black;
table-layout: fixed;
}
.theme {
background:url(http://placehold.it/180x200);
background-repeat:no-repeat;
}
回答by Mandy
The image is probably working, but hiding behind the table. Try setting td opacity to 0.9 to see if the background image then displays.
图像可能正在工作，但隐藏在桌子后面。尝试将 td opacity 设置为 0.9 以查看背景图像是否显示。
td {
opacity: 0.9;
}
回答by Shai Adler
If you want to use it in the html element, you can use
如果你想在html元素中使用它，你可以使用
style="background-image: url(http://yuordomain.com/background.jpg);"
