Wordpress transparenter Block hinter Text?
Hallo, ich arbeite gerade an einer Website und habe mir bei Wordpress.org das Theme VW Eco Nature ausgewählt.
Hier könnt ihr die Website mal sehen (ich bin noch nicht weit, ich weiß da passt noch einiges nicht, bin noch ganz am Anfang): https://biogemuesehof-hauser.de/
Ich würde gerne den aktuellen oder einen ähnlichen Hintergrund wählen, weil er tolle Farben hat und zu unserem Design passt. Ihr seht selbst dass ich dann Probleme mit der Textfarbe bekomme da der Hintergrund dann so unruhig ist und weder hell noch dunkle Textfarbe besonders schnike aussieht. Also bräuchte ich sowas wie einen transparenten hellen Block hinter dem Text so ähnlich wie im Header (den habe ich durch ein transparentes png bild hingekriegt, aber das sollte ja im mainblock nicht die Lösung sein) und so ähnlich wie hier (hier allerdings den hellen transparenten Block, nicht den weißen deckenden):
Ich kann das leider nicht einstellen bei meinem Theme im Customizer, nun wurschtel ich mit ein paar Lösungsansätzen aus dem Netz in der style.css rum aber ich komm nicht auf das gewünschte Ergebnis. Kann mir jemand helfen? Damit ein schöner transparenter Block erscheint der in der Seitenmitte ist und natürlich schön mitscrollt je nachdem wie viel Text auf die Seite kommt?
Bin absolute Anfängerin aber wäre sehr froh um Hilfe damit ich nicht den kompletten Hintergrund wechseln muss nur weil das nicht klappt.
Vielen lieben Dank schonmal!!
1 Antwort
Wenn man einmal den Textparagraph als Beispiel nimmt, in dem:
Diese Website befindet sich noch im Aufbau, Inhalte folgen.
steht: Dem kannst du mit CSS eine Hintergrundfarbe zuordnen, bei der auch eine Deckkraft definiert wird.
Beispiel:
background-color: rgba(0, 255, 0, 0.2);
In dem Fall hättest du einen grünen Hintergrund. Die Deckkraft wird als viertes Argument angegeben, der Wert liegt zwischen 0 und 1 (beide Grenzen inklusiv).
Weitere Informationen zur rgba-Angabe findest du hier. Wie es für dich am besten passt, kannst du ja selbst weiter ausprobieren.
Als Selektor könnte man bspw. so einen definieren:
.container p {
background-color: rgba(0, 255, 0, 0.2);
}
Damit dürftest du alle Paragraphen abdecken, die von Relevanz sind (das Testen überlasse ich dir). Oder aber du fügst dir im Markup noch einen weiteren umfassenden Container ein (z.B. ein article-Element), der sämtlichen Textinhalt umschließt.
hallo so spät. erst mal vielen dank für die ausführliche Antwort.
ich wüsste nur nicht wo genau ich diesen CSS code platzieren müsste, ich kenn mich damit leider wirklich absolut nicht aus.
Mittlerweile (wie du vermutlich auch gesehen hast) habe ich eine gute Lösung gefunden mit dem Elementor, hab ich vorher auch schon probiert aber da konnte ich die Textfarbe irgendwie nicht mehr ändern. Aber jetzt passts und sieht meiner Meinung nach auch recht gut aus mit den runden Ecken oben und dass es bis zum footer durchläuft, besser hätte ich es mit CSS code jedenfalls nicht hingekriegt.
Dennoch vielen lieben Dank :)