在 Zurb Foundation 5.5.3 中，为什么背景图像 CSS 在 Datatables 标题中被划掉？答案

【问题标题】：In Zurb Foundation 5.5.3 why is the background image CSS crossed out in the Datatables header?在 Zurb Foundation 5.5.3 中，为什么背景图像 CSS 在 Datatables 标题中被划掉？
【发布时间】：2017-02-21 22:15:44
【问题描述】：

我正在尝试在扩展宽度的 Datatables 标题中显示图像。样式使用 Zurb Foundation 5.5.3 框架。谁能说出为什么这个 CSS 在下图中被划掉了？（请查看使用 Zurb Foundation 5.5.3 的站点 http://iprobesolutions.com/test2 的链接

背景图片在这个JS Fiddle中显示得很好

我一直在尝试逐个剥离元素，但就是不知道 CSS 出了什么问题。

这是背景图片的 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;
}

【问题讨论】：

划掉的意思是被覆盖。这意味着您的 CSS 中某处有一条优先规则。
谢谢，是的，我已经阅读了相关内容，但我无法在我的代码中找到导致问题的原因。
在所有代码中搜索这些规则并查看重复的位置。
@scoopzilla tx 鼓励我进一步研究。我相信我找到了导致问题的原因，并且既然我知道明显有什么问题，我会发布更具体的新问题来解决这个问题。

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

【解决方案1】：

图像“https://cdn.datatables.net/1.10.13/images/sort_both.png”已经占用了页眉空间，导致 placehold.it 图像无法显示。当您取消选中前者时，后者开始正确显示

【讨论】：

您也可以接受自己的答案。我建议这样做。 :)