css - 在 Datatables 中使用 Zurb Foundation 5.5.3 设置样式，如何在标题中同时允许原始背景图像和新图像？

Question

我试图让图像显示在扩展宽度的数据表标题中。样式使用 Zurb Foundation 5.5.3 框架。

请参阅网站 http://iprobesolutions.com/test2使用 Zurb Foundation 5.5.3

背景图像在此 JS Fiddle 中显示良好所以我不知道如何在 fiddle 中复制这个问题。

这是背景图片的 CSS 示例:

table.table1 thead .beyer, 
#example table.dataTable thead .sorting_asc .beyer  {
background-image: url("https://placehold.it/264x140.jpg") no-repeat center        `center;
 height:264px;
 width:140px;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center top;
 height: 10rem;
 background-size: contain;
}

根据 Mozilla 的说法:

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

来源:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

我不知道这是不是解决这个问题的方法。但即使是，因为文件 https://cdn.datatables.net/1.10.13/css/dataTables.foundation.css不是我托管的，而是从他们的 CDN 上拉下来的，我应该如何禁用他们的原始背景图像，然后将两个背景图像组合在一行代码中？

Answer 1

您的样式需要位于数据表 css 文件之后。

 <!--data tables -->
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.foundation.css"/>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.foundation.css"/>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.foundation.css"/>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.foundation.css"/>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.foundation.css"/>


 <!-- other styles -->
 <link rel="stylesheet" href="/css/foundation.css">
 <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
 <link rel="stylesheet" href="/css/foundation-footer.css">
 <link rel="stylesheet" href="/css/custom.css">
 <link rel="stylesheet" href="/css/datatables.css"> 

尝试将样式放入/css/data/tables.css

此外，您似乎正在两次导入 foundation。

<link rel="stylesheet" href="/css/foundation.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css"/>