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>
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>
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>
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.