HTML / CSS - 如何为整个表格制作一张背景图片[关闭]

Posted 2023-03-06

【中文标题】HTML / CSS - 如何为整个表格制作一张背景图片[关闭]

【英文标题】：HTML / CSS - how to have one background image for entire table [closed]

【发布时间】：2013-10-18 16:15:06

【问题描述】：

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

我想要一个深色图像作为我的表格的背景，字体和边框线是浅色，比如白色。这是我的 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 一个背景图像，然后将位置设为绝对位置，但这也不起作用，图像甚至由于某种原因没有再次出现。

【问题讨论】：

图片路径错误？其他 CSS 干扰？

它对我有用，可能你的背景网址上有错误的路径。 Fiddle

检查浏览器的检查器，看看发生了什么（可能是特异性问题或路径不正确）。

【参考方案1】：

尝试将您的表格放在<div> 中，并将背景设置为<div>。

更新：

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

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

这个小提琴示例将表格固定在您指定的宽度和高度内。您仍然可以将背景图像应用到表格，这是一个使用包装 <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;

【讨论】：

这是一个间接的答案，但仍然是解决问题的方法（也是我的第一个想法）+1

这有什么关系？

当我这样做时，图像出现在桌子旁边。然后我将图像位置设置为绝对位置，然后表格覆盖了整个图像。有什么办法解决这个问题？

【参考方案2】：

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

td 
  opacity: 0.9;

【参考方案3】：

如果要在html元素中使用，可以使用

style="background-image: url(http://yuordomain.com/background.jpg);"