如何在背景色之上设置背景图像

Question

我想在background-color上方设置background-image（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

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

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> 背景和文本上，方法是使用 <span> 上的负值 z-index - 请参阅下面的演示：

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 - 请参阅下面的演示：

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

您不需要有一个不同的 class 命名为 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;
}

如何在背景色之上设置背景图像

How to set background-image above background-color

html

css

background-image

background-color

解决方案