Text auf verschiedenen Bildhintergründen schlecht lesbar

Ich bin hierher gekommen, um ein wenig Designhilfe oder Ratschläge zu erhalten, wie ich möglicherweise Folgendes verbessern könnte:

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ß gesetzt. Aber selbst dann ist ein Teil des Textes auf einigen Bildern nicht sehr gut lesbar, wie zum Beispiel:

Standard

Da ich mit CSS arbeite, habe ich verschiedene Optionen ausprobiert, wie zum Beispiel:

Hinzufügen von Textschatten:

mit Textschatten

CSS:

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

Auch versucht, ein halbtransparentes Feld um den Text zu erstellen:

mit halbtransparentem Hintergrund

Demo

Ich finde, die Box sieht fehl am Platz aus.

Ich habe eine Geige für alle erstellt, die sich mit CSS auskennen. Wenn nicht, können Sie mich gerne allein aufgrund Ihrer Vorstellungskraft beraten.

PS: Sie könnten auch raten, eine andere Schriftart zu verwenden, wenn dies dazu beitragen würde, dass sie sich besser abhebt.

Ein weiches schwarzes äußeres Leuchten auf Ihrem Text (Schatten in alle Richtungen) kann manchmal ausreichen, um ihm mehr Kontrast zu verleihen, ohne dass es so aussieht, als hätten Sie etwas dahinter.
@John Ich habe auch über Glühen nachgedacht, aber ohne viel Glüheffekt bleibt das Problem des nicht lesbaren Textes bestehen, und da ich an einer Unternehmenswebsite arbeite, habe ich beschlossen, es zu streichen, da dies unprofessionell aussehen würde. Danke aber für den Vorschlag!
Hätte betonen sollen, wie subtil ich sprach. Etwa 20-30% und breit gestreut, wo man es kaum merkt. Wenn es wie ein Leuchten aussieht oder Sie einen Übergang sehen können, ist es zu dunkel. Verwenden Sie gerade genug, um das Bild um ihn herum zu einem etwas dunkleren Ton zu verblassen, wo es auf den Schriftzug trifft.
@ John Hmm klingt interessant, ich werde es auch versuchen.

Antworten (3)

Als Alternative zu den bereits großartigen Antworten, wie wäre es, wenn Sie hinter dem Text ein schwarzes Div mit 50% Deckkraft hinzufügen?

Geben Sie hier die Bildbeschreibung ein

Dies würde es der Schriftart ermöglichen, auch auf praktisch jedem Bild zu funktionieren.

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

BEISPIEL

@ICanHasCheezburger Kein Problem! Ich stehe oft vor dem gleichen Problem, wenn ich Website-Arbeiten wie Bannerbilder mache, und ich fand, dass dies die angenehmste Art ist, es zu umgehen, da es die meiste Zeit gut funktioniert.

Ich schlage vor, die Schriftart fett zu machen (nur eine Gewichtsänderung, nicht die Schriftart selbst) und den Schatten neu anzugeben, damit er alle Kanten der Buchstaben definiert:

Beispiel 1

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

Sie können sogar mehr als einen Textschatten kombinieren , um sowohl eine klare Kontur als auch eine Unschärfe zu erstellen:

Beispiel 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;
Vielen Dank für Ihre Zeit! Ich habe geplant, die text-shadowvon Ihnen bereitgestellte zusammen mit der Lösung von SaturnsEye zu verwenden.
@Ican Ich habe keine Box gemacht, weil du gesagt hast, es nicht zu tun. "Ich habe auch versucht, einen halbtransparenten Rahmen um den Text zu erstellen. Ich finde, dass der Rahmen fehl am Platz aussieht." Aber Ihre Seite, Ihr Anruf...
Stimmt, aber nachdem ich die Lösung von SaturnsEye gesehen hatte, stellte ich fest, dass sie gut aussah, wenn Größe und Farbe geändert wurden. Sorry für die falsche Wortwahl. Vielleicht sollte ich das nächste Mal besser erklären.

Geben Sie ihm einen schwarzen transparenten Hintergrund und etwas Polsterung

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

Polsterung: 0,5 cm;

Spielen Sie einfach ein wenig mit diesen Zahlen herum, aber Sie sollten ein brauchbares Ergebnis erhalten.

Vielen Dank für Ihre Zeit! Mir wurde klar, dass, wenn Sie einen Fall haben, in dem das innere Element eine andere Deckkraft als das äußere haben muss, die opacityEigenschaft in diesem Fall nicht hilft, während das Festlegen der Deckkraft in der background-colorEigenschaft die Arbeit erledigt. Wie hier drin
Text auf verschiedenen Bildhintergründen schlecht lesbar
AntwortenHierDatenschutz-Bestimmungen1y, 0v