我想将background-image
设置在background-color
上方(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>
答案 0 :(得分:2)
请注意,您可以使用.class2
在background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x, red
本身中进行设置,而不是在两个类上设置背景(首先提到的图像将堆叠在最后提到的红色背景上)-请参见下面的演示:
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>
背景和文字上放置z-index
行/ em>上的<span>
-参见以下演示:
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
了-参见下面的演示:< / p>
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>
答案 1 :(得分:1)
您不需要使用其他名为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;
}