如何同时拥有背景渐变和背景图像？

Question

精简版

我如何拥有两者：

• background-color: linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #f8f8f8 36%, #f2f2f2 100%);
• background-image: url(sort_asc.png);

同时？

长版

我已经按照我想要的方式设计了一张桌子； 在 header 中具有垂直线性渐变：

 table { white-space: nowrap; border-collapse: separate; border-spacing: 0; border: 1px solid #7b9ebd; } th { background: linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #f8f8f8 36%, #f2f2f2 100%); font-weight: normal; border-bottom: 1px solid #d5d5d5; border-right: 1px solid #dedfe7; text-align: left; } th.sorting_asc { background: #dde9f6; background: linear-gradient(180deg, #f4f8fc 0%, #f4f8fc 36%, #e7eff7 36%, #dde9f6 100%); border-left: 1px solid #97d8fa; border-right: 1px solid #97d8fa; border-bottom: 1px solid #97d8fa; } th:hover { background: #dde9f6; background: linear-gradient(180deg, #e8f4ff 0%, #e8f4ff 36%, #c0e9ff 36%, #bbe4fd 100%); border-right: 1px solid #6bb8e6; border-bottom: 1px solid #99c6e3; }

 <table class="datatable"> <thead> <tr> <th>Name</th> <th class="sorting_asc">Date modified</th> <th>Type</th> <th>Size</th> </thead> <tbody> <tr> <td>explorer.exe</td> <td>1/20/2022 11:50 AM</td> <td>Application</td> <td>4,855 KB</td> </tr> </table>

转换为数据表

现在，正如建议的那样，我正在尝试将表转换为DataTable （ https://datatables.net/index ）。 我想要DataTable尝试包含的排序、搜索和排序箭头。 当它这样做时，它会为thead添加一个新的 CSS 条目：

table.datatable thead .sorting_asc {
  background-image: url("https://cdn.datatables.net/1.11.4/images/sort_asc.png") !important;
  background-repeat: no-repeat;
  background-position: center right;
}

此background-image破坏了已经存在的background渐变：

 table { white-space: nowrap; border-collapse: separate; border-spacing: 0; border: 1px solid #7b9ebd; } th { background: linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #f8f8f8 36%, #f2f2f2 100%); font-weight: normal; border-bottom: 1px solid #d5d5d5; border-right: 1px solid #dedfe7; text-align: left; } th.sorting_asc { background: #dde9f6; background: linear-gradient(180deg, #f4f8fc 0%, #f4f8fc 36%, #e7eff7 36%, #dde9f6 100%); border-left: 1px solid #97d8fa; border-right: 1px solid #97d8fa; border-bottom: 1px solid #97d8fa; } th:hover { background: #dde9f6; background: linear-gradient(180deg, #e8f4ff 0%, #e8f4ff 36%, #c0e9ff 36%, #bbe4fd 100%); border-right: 1px solid #6bb8e6; border-bottom: 1px solid #99c6e3; } table.datatable thead.sorting_asc { background-image: url("https://cdn.datatables.net/1.11.4/images/sort_asc.png");important: background-repeat; no-repeat: background-position; center right; }

 <table class="datatable"> <thead> <tr> <th>Name</th> <th class="sorting_asc">Date modified</th> <th>Type</th> <th>Size</th> </thead> <tbody> <tr> <td>explorer.exe</td> <td>1/20/2022 11:50 AM</td> <td>Application</td> <td>4,855 KB</td> </tr> </table>

那么问题来了：

• 我怎样才能让我的background
• 与他人的background-image共存

所以它们都是同时运作的？

注意：我确信有一些技术可以伪造排序箭头（向TH元素添加额外的文本，使用斜角边框使其看起来像箭头等）这些可能是我的问题的解决方案，但不是我的问题：

• 如何有背景渐变
• 和背景图片

鉴于我无法将它们合并为一个：

background: url("sort_asc.png") no-repeat center right, linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #f8f8f8 36%, #f2f2f2 100%);

Answer 1

使用伪元素：

 table { white-space: nowrap; border-collapse: separate; border-spacing: 0; border: 1px solid #7b9ebd; } th { background: linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #f8f8f8 36%, #f2f2f2 100%); font-weight: normal; border-bottom: 1px solid #d5d5d5; border-right: 1px solid #dedfe7; text-align: left; } th.sorting_asc { background: #dde9f6; background: linear-gradient(180deg, #f4f8fc 0%, #f4f8fc 36%, #e7eff7 36%, #dde9f6 100%); border-left: 1px solid #97d8fa; border-right: 1px solid #97d8fa; border-bottom: 1px solid #97d8fa; } th:hover { background: #dde9f6; background: linear-gradient(180deg, #e8f4ff 0%, #e8f4ff 36%, #c0e9ff 36%, #bbe4fd 100%); border-right: 1px solid #6bb8e6; border-bottom: 1px solid #99c6e3; } table.datatable thead.sorting_asc { position:relative; z-index:0; } table.datatable thead.sorting_asc:before { content:""; position:absolute; z-index:-1; inset:0; background-image: url("https://cdn.datatables.net/1.11.4/images/sort_asc.png");important: background-repeat; no-repeat: background-position; center right; }

 <table class="datatable"> <thead> <tr> <th>Name</th> <th class="sorting_asc">Date modified</th> <th>Type</th> <th>Size</th> </thead> <tbody> <tr> <td>explorer.exe</td> <td>1/20/2022 11:50 AM</td> <td>Application</td> <td>4,855 KB</td> </tr> </table>