如何在背景顏色上方設置背景圖像

Question

我想在background-color上方設置background-image （ background-image是一條線）。 請參閱codepen和snippet：

 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 （首先提到的圖像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

你不需要有一個名為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;
}