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

时间:2017-04-20 12:36:01

标签: html css image xhtml styles

我想将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>

1 个答案:

答案 0 :(得分:0)

如果您无法更改HTML并且无法使用JavaScript,我不会认为您想要的是什么。我的意思是,我能达到你想要的显示的唯一方法就是欺骗一点......

&#13;
&#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;
&#13;
&#13;

豫ICP备18024241号-1