-5

编辑：好吧原来是浏览器问题。希望有人能在我得到更多的反对票之前关闭它-.-

我想要一个深色图像作为我的桌子的背景，字体和边框线是浅色，比如白色。这是我的 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>

这是我的 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;   
    }

但是，这不起作用，并且没有将任何图像放在屏幕上。怎么来的？我什至尝试将 !important 放在最后，就像这样

background:url(../images/15387_isopropyl_alcohol.jpg) !important;

但我仍然没有得到它应该工作吗？如果是，那么我想我会再次检查我的整个代码，看看是否有什么问题。有没有另一种方法可以将背景图像放在桌子后面？我正在考虑将表格放在 div 中，然后给 div 一个背景图像，然后将位置设为绝对，但这也不起作用，图像甚至由于某种原因没有再次出现。

4

3 回答 3

3

试着把你的桌子放在 a 里面，<div>然后在上面设置背景<div>。

更新：

该div建议只是为了快速修复，但这完全取决于您的图像参考是否有效，以及您尝试做什么以及为什么首先使用背景图像。

您最终不得不强制表格与图像大小相同或重复图像（可能是也可能不是您想要background-size: contain;的）或用于缩放图像以适合内部<div>或用于background-size: cover;将图像缩放到大小其中<div>，最后 2 个仅适用于更现代的浏览器。

这个小提琴示例将表格固定在您指定的宽度和高度内。您仍然可以将背景图像应用于表格，这是一个使用包装的示例，<div>因此您还可以在必要时将其他元素放在背景前面。

http://jsfiddle.net/wbPpa/6/

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：

.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;
}
于 2013-10-10T18:42:04.087 回答
0

如果你想在 html 元素中使用它，你可以使用

style="background-image: url(http://yuordomain.com/background.jpg);"
于 2019-03-15T13:56:24.267 回答
0

该图像可能有效，但隐藏在桌子后面。尝试将 td opacity 设置为 0.9 以查看背景图像是否显示。

td {
  opacity: 0.9;
}
于 2015-11-29T15:58:04.060 回答