如何在背景颜色上方设置背景图像

Question

I want to set background-image above the background-color (the background-image is a line). See codepen and 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

Note that instead of setting background on two classes you can set it in .class2 itself by using background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x, red (the image mentioned first will be stacked over the red background mentioned last) - see demo below:

 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> 

---

Solution

If you want to have the background image to extend over the full td , one option is to use radial-gradient for the red circle and combining it with background-image for the line. Note that here the text is above the red background color and the line :

 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> 

---

If you want a strikethrough effect , you could place the line background-image over the <span> background and text, by use negative z-index on the <span> - see demo below:

 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> 

Yet another option for the strikethrough effect is using a pseudo element so that you don't have to mess with z-index - see demo below:

 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

You don't need to have a different class named table.class1 rather this will work well

.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;
}