Question

这是有关的问题

我用这种方法尝试了很多，但遗憾的是找不到溶液

所以在搜索之后感觉要问这个问题净。*

   =====================================================================
   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/

Answer 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");
}

Answer 2

默认情况下，bootstrap-table不应用任何背景样式（它是透明的），除了table-hover类，它为鼠标指针当前悬停的行的背景着色。我没有使用table CSS选择器设置所有表的样式，而是建议使用相同的选择器来初始化bootstrap-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来初始化bootstrap-table以及应用特定的样式。我删除了cellspacing，因为它与bootstrap-table是冗余的，默认情况下没有任何单元格间距。最后，我删除了高度/宽度属性，转而使用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;
}

如果仍没有在bootstrap-table中获取背景图像，那么你必须在某个地方使用其他CSS来对表进行着色，否则会混淆表的背景图像。如果是这种情况，如果可能的话，它会帮助我们查看有问题的bootstrap表的HTML，CSS和JavaScript。

如何为引导程序表设置背景图像

2 个答案: