在数据表中使用 Zurb Foundation 5.5.3 进行样式设置，如何在标题中同时允许原始背景图像和新图像？答案

【问题标题】：Styling with Zurb Foundation 5.5.3 in Datatables, how do I allow both original background image and new image in the header?在数据表中使用 Zurb Foundation 5.5.3 进行样式设置，如何在标题中同时允许原始背景图像和新图像？
【发布时间】：2017-02-24 04:02:02
【问题描述】：

我正在尝试在扩展宽度的 Datatables 标题中显示图像。样式使用的是 Zurb Foundation 5.5.3 框架。

请参阅使用 Zurb Foundation 5.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://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中拉下来的，我应该如何禁用他们的原始背景图像，从而将两个背景图像组合在一行代码中？

【问题讨论】：

标签： css datatables zurb-foundation datatables-1.10 zurb-foundation-5

【解决方案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"/>

【讨论】：

谢谢。我按照你的建议做了。问题仍然存在。关于下一步的任何建议？
您的示例链接仍然具有 css 文件的原始顺序。另一种方法是在你的 css 中使用 !important，但这不是最佳做法。将 datatables.css 第 55 行更改为 background-image: url(https://placehold.it/264x140.jpg) !important;
订单已更改，不知道为什么它没有显示在您的终端上。见截图：dropbox.com/s/55zg4ee65tmioru/… 当你说要更改 datatables.css 第 55 行时，由于我使用的是他们 CDN 中的文件，除非我下载并自托管它，否则我该如何更改它？

【解决方案2】：

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

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

【讨论】：