Question

我想将TEXT放在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，我不会认为您想要的是什么。我的意思是，我能达到你想要的显示的唯一方法就是欺骗一点......

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何使用类将文本放在图像上

1 个答案: