Weißer Texthintergrund teiltransparent?

Wuseline

Hallo,

habe in der Suchfunktion zwar meine Frage in etwa gefunden, jedoch keine Antwort dazu lesen können.

Ich würde gern in meinem twentyeleven-Child-Theme den weißen Texthintergrund teiltransparent machen, um das Hintergrundfoto etwas durchscheinen zu lassen.

Ich habe auch eine Vorstellung davon, dass man in der style.css mit den passenden Begriffen daran arbeiten kann. Entweder mit opacity oder durch Aufruf einer Bilddatei wie dieser: weiss_50.png.

Konkrete Frage:
Wohin in der Themestruktur (Ordner) müsste ich dieses Bild laden, um es in der style.css zu verlinken?
Wo muss ich diesen Link gegen die weiße Farbe austauschen?

Code

#page {
    background: #fff;
}

Ist es diese Stelle?

Oder gibt es da noch andere Tricks?

Vielleicht kann mir hier jemand weiterhelfen.

Danke,
Wuseline

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Nevery

Bilder sollte man nie nehmen, die erhöhen nur unnötig die Ladezeit.
opacity hat den Nachteil, dass es auch enthaltene Elemente transparent macht, also z.B. die Schrift.

Besser wäre eine Angabe wie diese: background-color: rgba(255, 255, 255, 0.5); - dadurch wird der Hintergrund transparent (die Angabe 0.5 kannst Du von 0 = komplett durchsichtig bis 1 = komplett undurchsichtig variieren), der Text bleibt jedoch gut lesbar.

An welche Stelle Du das einfügen musst kann ich Dir ohne Link zu Deiner Website nicht genau sagen.

Zur besseren Nachvollziehbarkeit: http://cssdesk.com/LrbTc ;)

Wuseline

Hallo Nevery,

dass Hintergrundbilder die Ladezeit erhöhen, weiß ich. Nun, mich stört das nicht, denn es ist nur eine reine Hobbyseite, es kommt hier wohl nicht darauf an. Ich finde die Option, mir Fotos als Background einzurichten, einfach schön.
Guckst du hier: http://madiso.de/

Also nochmals die Frage: Wo und wie bekomme ich eine Teiltransparenz in den weißen Texthintergrund? Hatte schon vor einiger Zeit andere Tipps ausprobiert, da war die weiße Farbe allerdings ganz weg.

Hm, es muss doch eine Lösung dafür geben...

Nevery

Ich glaube, wir reden da etwas aneinander vorbei. Ich sage ja nichts gegen Dein eigentliches Hintergrundbild - das dient schliesslich der Dekoration und hat seinen Sinn. Ich sage nur etwas dagegen, eine Transparenz durch ein Bild vorzutäuschen.

Wenn Du in der style.css die Angabe #page {background: #fff;} durch #page {background-color:rgba(255, 255, 255, 0.5);} ersetzt sollte das in die von Dir gewünschte Richtung gehen, die genaue Transparenz müsstest Du halt selber einstellen anhand der letzten Zahl. Warst da aber schon auf dem richtigen Wege ;)

Wuseline

Vielen Dank, Nevery. Ja, da habe ich dich wohl missverstanden, bin halt doch ein "Anfänger" :-). Ich hatte das mit deinem Link und dem Bild nicht kapiert, sorry.

Jetzt ist es tatsächlich so, wie ich es haben wollte. Werde mich später mal an die Details und evtl. ein anderes Bild machen - Supi!

Nevery

Kein Problem, ich hatte mich da ja auch etwas doof ausgedrückt. Der Link sollte auch nur den Unterschied zwischen opacity und meiner bevorzugten Variante deutlich machen.

Wuseline

Ich traue mich jetzt gar nicht, noch eine letzte Frage zum Thema zu stellen :smile:

Wie kann ich diese Sache auf den Footer anwenden? Der bleibt ja weiß, wenn ich den Code bei #page eingebe. Habe mir die Sache vorhin mal angesehen und ein wenig probiert, finde aber nicht die richtige Zeile in der style.css, wo ich etwas Gleichartiges erreiche.

Wenn ich das jetzt auch noch hinbekäme, wäre ich echt happy. Dann kann ich das Design demnächst neu überarbeiten.

Nevery

#site-generator gibt für den Footer den zusätzlichen Hintergrund an, die Angabe kannst Du genauso wie für #page editieren. Da #page aber noch dahinter liegt wirst Du diese Änderung nur dann sehen, wenn Du die Transparenz in #page vorher wieder rein nimmst - evtl. die Transparenz für #site-generator noch etwas erhöhen, 0.2 oder so.

Wuseline

Vielen herzlichen Dank für die zeitnahe Auskunft :smile:. Das hat mir sehr geholfen. Ich habe die Seite ja noch nicht so lange und feile immer noch am Design herum.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Weißer Texthintergrund teiltransparent?

Jetzt mitmachen!