如何将背景图像设置为背景颜色以上

Question

我想将background-image设置在background-color上方（background-image是一行）。 See codepen和摘要：

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 {
  background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5rem !important;
  display: inline-block;
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

Answer 1

请注意，您可以使用.class2在background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x, red本身中进行设置，而不是在两个类上设置背景（首先提到的图像将堆叠在最后提到的红色背景上）-请参见下面的演示：

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 {
  padding: 10px; /* for illustration */
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x,
              red; /* changed*/
  border-radius: 5rem !important;
  display: inline-block;
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

---

解决方案

如果要使背景图像延伸到整个td，则一个选项是对红色圆圈使用radial-gradient，并将其与背景图像组合成一行。请注意，此处文本位于红色背景颜色和线条上方：

table {
border-collapse: collapse;
}

table, td{
border: 1px solid black;
}

td.class1 {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 10px;
  background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x,
              radial-gradient(farthest-side,red 70%, transparent 72%);
  background-position: center;
  text-align: center;
  color: #fff;
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

---

如果您想要删除线效果，则可以使用负background-image <，在<span>背景和文字上放置z-index行/ em>上的<span>-参见以下演示：

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 {
  padding: 10px; /* for illustration */
  background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
  background-position: center;
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5rem !important;
  display: inline-block;
  position: relative; /* added */
  z-index: -1; /* added */
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

删除线效果的另一个选择是使用伪元素，这样您就不必弄乱z-index了-参见下面的演示：< / p>

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 { /* added */
  padding: 10px; /* for illustration */
  position: relative;
}

td.class1:after { /* added */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
  background-position: center; /* added */
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5rem !important;
  display: inline-block;
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

Answer 2

您不需要使用其他名为table.class1的类 宁可这样很好

.class2 {
   text-align: center;
    color: #fff;
    height: 20px;
    width: 20px;
    border-radius: 5rem !important;
    display: inline-block;
    background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
    background-color: red;
}