如何将文本放在与课堂的图像上

Question

我想在img上放文字，但我无法更改代码。

任何CSS都可以工作

我已经尝试过，但是它无法正常工作

.n3 {
  position: relative;
}
.n4 {
  position: absolute;
  bottom: 7px;
  left: 12px;
  padding: 1px;
  box-sizing: border-box;
  font-size: 10px;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

<div class="n1" id="n1">
  <div class="n2">
    <a class="n3" href="URL">
      <span class="n4">TEXT</span>
    </a> <span class="n5"><a href="URL"><img class="n6" src="https://placehold.it/350x150"></a></span>
    <a class="n3" href="URL">
      <span class="n4">TEXT</span>
    </a> <span class="n5"><a href="URL"><img class="n6" src="https://placehold.it/350x150"></a></span>
    <a class="n3" href="URL">
      <span class="n4">TEXT</span>
    </a> <span class="n5"><a href="URL"><img class="n6" src="https://placehold.it/350x150"></a></span>
  </div>
</div>

Answer 1

，如果您不能更改HTML，并且无法使用JavaScript，我认为您想要什么。我的意思是，我唯一可以实现您所需的显示的方法是作弊...

.n3 {display:none;}
.n5 > a {position:relative;}
.n5 > a::after {
  position: absolute;
  content:'TEXT';
  bottom: 7px;
  left: 12px;
  padding: 1px;
  box-sizing: border-box;
  font-size: 10px;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

<div class="n1" id="n1">
  <div class="n2">
    <a class="n3" href="URL">
      <span class="n4">TEXT</span>
    </a>  <span class="n5"><a href="URL"><img class="n6" src="https://placehold.it/350x150"></a></span>
    <a class="n3" href="URL">
      <span class="n4">TEXT</span>
    </a>  <span class="n5"><a href="URL"><img class="n6" src="https://placehold.it/350x150"></a></span>
    <a class="n3" href="URL">
      <span class="n4">TEXT</span>
    </a>  <span class="n5"><a href="URL"><img class="n6" src="https://placehold.it/350x150"></a></span>
  </div>
</div>