如何在带有类的图像上放置文本答案

【问题标题】：How to put text on an image with class如何在带有类的图像上放置文本
【发布时间】：2017-09-17 02:23:41
【问题描述】：

我想在IMG上放TEXT，但是我不能改代码..

任何 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>

【问题讨论】：

“无法正常工作”是什么意思？预期的输出是什么？
请修复我制作的 sn-p 以使用您需要的图像大小 - 如果图像在屏幕上的宽度大于它们的组合宽度，则 CSS 可以工作

标签： html css image xhtml styles

【解决方案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>

【讨论】：