如何在数据表中使用ZURBFoundation5.5.3的样式，如何允许原始背景图像和新图像出现在标题中？

Question

我试图让图片显示在一个扩展宽度的数据表头。样式设计使用ZURBFoundation5.5.3框架。

请参阅使用ZURBFoundation5.5.3的网站http://iprobesolutions.com/test2

背景图像在这个JS 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说：

使用CSS3，您可以将多个背景应用于元素。这些是层次分明的，你提供的第一个背景在上面，最后一个背景列在后面。只有最后一个背景可以包含一个背景颜色。

来源：背景

我不知道这是不是解决这个问题的方法。但是即使是这样，由于文件https://cdn.datatables.net/1.10.13/css/dataTables.foundation.css不是由我托管的，而是从CDN中提取出来的，那么如何禁用它们的原始背景图像，从而将两个背景图像合并到一行代码中呢？

Answer 1

感谢我以前的前端老师，我澄清了以下几点：

table.dataTable头.sorting的特异性与table.table1 thead .beyer大致相同。dataTables.foundation.css已经转移到现在加载在datatables.css，table.table1 thead .beyer之前。

Answer 2

您的样式需要在可数据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中。

而且看起来你是两次导入基金会。

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