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

Question

精简版

我如何同时拥有：

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

同时?

长版

我已经按照我想要的方式设计了 table；在 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>

转换为数据表

现在，as suggested i'm trying to convert the table into a 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

所以他们俩operate at the same time?

注意：我确定有伪造排序箭头的技术（向 TH 元素、using a bevelled border to make it look like an arrow 等添加额外文本）这些可能是我的问题的解决方案，但不是我的问题：

如何设置背景渐变
和背景图片

考虑到 i can't merge them into one:

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>

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

How to have background gradient and background image at the same time?

html

css

background

background-image

精简版

长版

转换为数据表