Wie Text setzen auf ein Bild mit Klasse

Ich möchte auf IMG TEXT setzen, aber ich kann den Code nicht ändern ..Wie Text setzen auf ein Bild mit Klasse

Jeder möglicher CSS arbeiten

Ich habe dies versucht, aber es ist nicht

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

richtig funktioniert

Quelle

2017-04-20 Ninja Anime

Was „funktioniert nicht richtig“ bedeutet dies erreichen könnte? Was ist die erwartete Ausgabe? – mplungjan

Bitte korrigieren Sie das Snippet, das ich gemacht habe, um die Bildgröße zu verwenden, die Sie brauchen - das CSS funktioniert, wenn die Bilder auf einem Bildschirm sind, der breiter als ihre kombinierte Breite ist – mplungjan

ich glaube nicht, was Sie wollen möglich ist, wenn Sie nicht die HTML ändern können, und wenn Sie nicht JavaScript verwenden können. Ich meine, die einzige Möglichkeit, die gewünschte Anzeige durch Betrug ein wenig ...

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

Quelle

2017-04-21 11:13:33

Wie Text setzen auf ein Bild mit Klasse

Antwort

Verwandte Themen