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

Question

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

请参阅网站 http://iprobesolutions.com/test2 which is using 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

而且您似乎导入了两次粉底。

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

Answer 2

感谢我以前的前端老师，澄清了以下内容：

table.dataTable thead .sorting 似乎具有与 table.table1 thead .beyer 大致相同的特异性。 dataTables.foundation.css 已移至 datatables.css、table 之前加载。table1 thead .beyer.

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

Styling with Zurb Foundation 5.5.3 in Datatables, how do I allow both original background image and new image in the header?

css

datatables

zurb-foundation

datatables-1.10

zurb-foundation-5