Comment mettre du texte sur une image avec la classe

Je veux mettre du texte sur IMG, mais je ne peux pas changer le code ..Comment mettre du texte sur une image avec la classe

Tout css travaillera

Je l'ai essayé, mais ce n'est pas fonctionne correctement

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

Source

2017-04-20 Ninja Anime

Que signifie « ne fonctionne pas correctement » signifie? Quelle est l'attente de production? – mplungjan

Veuillez corriger l'extrait que j'ai fait pour utiliser la taille d'image dont vous avez besoin - le CSS fonctionne si les images sont sur un écran plus large que leur largeur combinée – mplungjan

Je ne pense pas que ce que vous voulez est possible si vous ne pouvez pas modifier le code HTML et si vous ne pouvez pas utiliser JavaScript. Je veux dire, la seule façon que je pouvais obtenir l'affichage désiré est en trichant un peu ...

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

Source

2017-04-21 11:13:33

Comment mettre du texte sur une image avec la classe

Répondre

Questions connexes