Text auf verschiedenen Bildhintergründen nicht gut lesbar

30

Ich bin hierher gekommen, um ein bisschen Designhilfe oder Rat zu suchen, wie ich möglicherweise Folgendes verbessern kann:

Wie der Titel schon sagt, habe ich ein Website-Banner mit mehreren Texten, die auf verschiedenen Bildern als Hintergrund angezeigt werden. Da die meisten Bilder dunkel sind, habe ich die Schriftfarbe auf Weiß eingestellt. Aber selbst dann ist ein Teil des Textes auf einigen Bildern nicht gut lesbar:

Standard

Da ich mit CSS arbeite, habe ich verschiedene Optionen ausprobiert:

Hinzufügen von Textschatten:

mit text schatten

CSS:

text-shadow: 3px 3px 0px #000;

Es wurde auch versucht, einen halbtransparenten Rahmen um den Text zu erstellen:

mit halbtransparentem Hintergrund

Demo

Ich fühle, die Box sieht fehl am Platz aus.

Ich habe eine Geige für jeden geschaffen, der CSS kennt. Wenn nicht, können Sie mich gerne nur aufgrund Ihrer Vorstellungskraft beraten.

PS: Sie können auch Tipps zur Verwendung einer anderen Schriftart geben, um besser hervorzuheben.

— AyB
quelle

4

Manchmal reicht ein sanftes, schwarzes Außenlicht auf Ihrem Text (Schatten in alle Richtungen) aus, um mehr Kontrast zu erzielen, ohne dass Sie den Eindruck haben, etwas dahinter zu haben.

— John

@ John Ich habe auch über Glühen nachgedacht, aber ohne viel Glühen bleibt das Problem des nicht lesbaren Texts bestehen. Da ich an einer Unternehmenswebsite arbeite, habe ich mich entschlossen, es durchzustreichen, da es unprofessionell aussehen würde. Danke für den Vorschlag!

— AyB

2

Ich hätte betonen sollen, wie subtil ich redete. Wie 20-30% und weit verbreitet, wo Sie es kaum bemerken würden. Wenn es wie ein Glühen aussieht oder Sie einen Übergang sehen können, ist es zu dunkel. Verwenden Sie gerade genug, um das Bild um ihn herum in einen etwas dunkleren Farbton zu bringen, in dem es auf den Schriftzug trifft.

— John

@ John Hmm hört sich interessant an, ich werde es auch versuchen.

— AyB

22

Wie wäre es als Alternative zu den bereits großartigen Antworten mit einem schwarzen Div mit 50% Deckkraft hinter dem Text?

Bildbeschreibung hier eingeben

Dies würde es der Schriftart ermöglichen, im Grunde genommen auch mit jedem Bild zu arbeiten.

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

BEISPIEL

— SaturnsEye
quelle

@ICanHasCheezburger Kein Problem! Ich habe das gleiche Problem, wenn ich mit Website-Arbeiten wie Banner-Bildern arbeite, und ich fand das die angenehmste Art, mich darum zu kümmern, da es die meiste Zeit gut funktioniert.

— SaturnsEye

17

Ich schlage vor, die Schriftart fett zu machen (nur eine Änderung der Gewichtung, nicht der Schriftart selbst) und den Schatten neu festzulegen, damit alle Ränder der Buchstaben definiert werden:

Beispiel 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

Sie können sogar mehr als einen Textschatten kombinieren , um einen eindeutigen Umriss sowie eine Unschärfe zu erstellen:

Beispiel 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;

— Andrew Leach
quelle

Vielen Dank für Ihre Zeit! Ich habe geplant, das text-shadowvon Ihnen bereitgestellte zusammen mit der SaturnsEye-Lösung zu verwenden.

— AyB

@Ican Ich habe keine Box gemacht, weil du das nicht gesagt hast. "Ich habe auch versucht, einen halbtransparenten Rahmen um den Text zu erstellen. Ich habe das Gefühl, dass der Rahmen nicht am richtigen Ort ist." Aber Ihre Website, Ihr Anruf ...

— Andrew Leach

Das stimmt, aber nachdem ich die Lösung von SaturnsEye gesehen hatte, stellte ich fest, dass sie gut aussah, als Größe und Farbe geändert wurden. Entschuldigen Sie die falsche Wortwahl. Vielleicht sollte ich das nächste Mal besser erklären.

— AyB

3

Geben Sie ihm einen schwarzen transparenten Hintergrund und etwas Polsterung

Hintergrundfarbe: rgba (0,0,0,0,5);

Polsterung: 0.5em;

Spielen Sie einfach ein bisschen mit diesen Zahlen herum, aber es sollte Ihnen ein brauchbares Ergebnis bringen.

— Philip Feldmann
quelle

Vielen Dank für Ihre Zeit! Ich habe festgestellt, dass in einem Fall, in dem das innere Element eine andere Deckkraft im äußeren haben muss, die opacityEigenschaft in diesem Fall nicht hilft, während das Festlegen der Deckkraft in der background-colorEigenschaft die Arbeit erledigt. Wie hier

— AyB