![](/img/trans.png)
[英]CSS aligning background-image above background-color set in *:before and *:after
[英]How to set background-image above background-color
我想在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>
请注意,不是在两个类上设置背景,而是可以使用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>
你不需要有一个名为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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.