Img src von Hex-Farbe?

Question

Ich muss einige Bild-Tags auf einer Webseite mit altem Text und/oder Titeln versehen.

Die HTML-Struktur ist nicht wirklich in meiner Kontrolle, so dass Bild-Tags erforderlich sind, obwohl die Tags selbst eine flache Farbe aus einem Hex-Code in einer SQL-Tabelle gespeichert angezeigt werden.

Like This

<img style="background-color:{@hexCode};" title="{@colourName}"/>

Mit @hexCode der Farbcode in Frage zu sein (das heißt '# 1f1f1f') und @colourName ist der beschreibende Name für die Farbe durch den Kunden ausgewählt.

Das Problem, das ich habe, ist, dass, weil die Farbe von der background-color Eigenschaft gesetzt wird der Titeltext (und Alt-Text tut dies auch) über der Farbe sowie auf Hover angezeigt wird.

Google hat mir nicht gegeben keine brauchbaren Lösungen, und ich kann nicht nur nicht um die Titel zu den Bildern hinzufügen? Was soll ich machen?

Answer 1

Warum nicht stattdessen div s verwenden. Der Grund, dass die title oder alt angezeigt wird, ist, weil sie angezeigt werden sollen, wenn das Bild nicht gefunden wird, und Sie geben keine src.

<div style="background-color: gold; height: 30px; width: 30px;" title="Gold"></div>

Wenn Sie jedoch einen img Tag ohne Quelle verwenden müssen, können Sie src="//:0" zu fälschen gültige Quelle verwenden.

<img src="//:0" style="background-color: gold; height: 30px; width: 30px;" title="Gold" />

Answer 2

Das Problem, das ich habe, ist, dass, weil the colour is being set by the background-color property der Titeltext (und Alt-Text tut dies auch) auf der Oberseite der Farbe wie auf schweben auch angezeigt wird .

Nein - Der Titel und der Alternativtext werden angezeigt, weil Ihr Bild nicht geladen ist, genau deshalb werden sie verwendet. https://jsfiddle.net/b0njy0gg/

Wenn ein Bildquelle vorhanden https://jsfiddle.net/thajo9pL/

Answer 3

Ich gehe davon aus, da Sie img Tags ohne src Attribut sind definiert, SEO nicht eines Ihrer Ziele ist - wenn das der Fall ist, wird die folgende Lösung des Setzens die font-size Ihres Bildes auf 0 wird auch die Wiedergabe des alt-Text-Rendering beeinflussen, wie Sie in diesem Beispiel sehen können:

img { 
 
    border: 1px solid #aaa; 
 
    display: block; 
 
    font-size: 0; 
 
    width: 200px; 
 
    height: 50px; 
 
}

<img alt="Test" />

Für alle, die sich Sorgen um die W3c-Validität oder SEO-Freundlichkeit machen: Versuchen Sie das nicht zu Hause!