2017-04-20 24 views
1

我希望把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>

+0

什么是“不正常”呢?什么是预期的输出? – mplungjan

+0

请修复我制作的片段以使用您需要的图片大小 - 如果图片在宽度大于其组合宽度的屏幕上 – mplungjan

回答

0

我不认为你想要什么是可能的,如果你不能改变的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>