使用 CSS 将背景颜色/图像应用于跨度

Question

我有以下类型的HTML结构，并希望仅使用CSS在span上应用CSS。

<table>
<tr>
<td>
 <table>
  <tr>
   <td>
     <img src="/test/test.png">
   </td>
  </tr>
 </table>
  <input type="hidden">
<span>
</span>
<span>
</span>
</td>
</tr>
</table>
I am trying below CSS but it is not applying any color.
img[src *="/test/test.png"] +span {
background-color:Red;
}

我想仅在特定图像标签的帮助下将背景颜色/图像应用于第一个跨度。

Answer 1

试试这段代码。希望这对你有用

td img {
    height: 250px;
    width: 600px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
span:nth-child(3)  {
    border: 5px solid;
    height: 250px;
    width: 500px;
    display: inline-block;
    background: #f00;
}
span:nth-child(4) {
    height: 250px;
    width: 500px;
  display:inline-block;
    background-image: url(https://i.ibb.co/W2tYdfv/88.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

<table>
<tr>
<td>
 <table>
  <tr>
   <td>
     <img src="https://i.ibb.co/k8N4R4Z/66.jpg">
   </td>
  </tr>
 </table>
  <input type="hidden">
<span>
</span>
<span>
</span>
</td>
</tr>
</table>