-1

这是关心的问题

我用这种方法尝试了很多，但不幸的是找不到解决方案。

所以觉得在网上搜索后问这个问题。*

   =====================================================================
   Is there any way to make an image go backside of the table and looks 
   like only image visible and table behind on the image itself.
   code will be like this*

    Aim: To have an image as a background for a table which is 
    developed under bootstrap. 
    -------------------------------------
    The preferred result should look like this
     link:https://jsfiddle.net/39mdqkz2/4/

输出示例：jsfiddle.net/39mdqkz2/4/

4

2 回答 2

1

这很丑陋，但这似乎有效：

table {
    background-size: 3096px auto;
    background-repeat: no-repeat;
    background-image: url("http://questromworld.bu.edu/studyabroad/files/2014/07/Luc-Australia-Beach.jpg");
}
于 2015-08-08T18:00:53.313 回答
1

默认情况下，bootstrap-table 不应用任何背景样式（它是透明的），除了 table-hover 类，它为鼠标指针当前悬停的行的背景着色。我建议不要使用 CSS 选择器设置所有表格的样式，而是table使用与初始化引导表相同的选择器：

HTML

<table id="tableWithBgImage">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
     <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <!-- Additional rows removed for brevity -->
    </tbody>
</table>

如您所见，我从您的 JSFiddle 示例中删除了这些类...table-striped将导致交替行被着色（这在您的 JSFiddle 中不起作用，因为该类没有 CSS）。table-bordered是 bootstrap-table 中的默认值，所以它是多余的，可以省略。我还创建了一个 ID 来初始化引导表并应用特定样式。我删除cellspacing了，因为它与引导表冗余，默认情况下没有任何单元格间距。最后，我删除了 height/width 属性，转而使用 CSS 指定。

JavaScript

$(document).ready(function() {
    $("#tableWithBgImage").bootstrapTable(
        // Set the initial classes for the table
        // This removes the bootstrap-table default inclusion of 'table-hover'
        // to prevent rows from being highlighted on hover. Add 'table-hover' to the
        // list if you want to re-enable this
        classes: "table"
    );
});

该classes选项在 bootstrap-table 初始化时设置初始类名。

CSS

#tableWithBgImage {
    background-repeat: no-repeat;
    background-image: url('http://questromworld.bu.edu/studyabroad/files/2014/07/Luc-Australia-Beach.jpg');
    height: 600px;
    width: 600px;
}

如果您仍然没有在引导表中获取背景图像，那么您必须在某处为表格着色或以其他方式混淆表格的背景图像的其他 CSS。如果是这种情况，并且如果可能的话，这将有助于我们查看您的 HTML、CSS 和 JavaScript 以用于有问题的引导表。

于 2015-08-13T22:18:58.140 回答