Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Hintergrundfarbe eines Elements festlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sass kennt mehrere Wege, um mit Farben bzw. Hintergründen zu arbeiten. So schaffen Sie eine Transparenz bei der Hintergrundfarbe eines Elements.
05:36

Transkript

Die Größe meines Titels gefällt mir jetzt eigentlich schon ganz gut. Das Einzige, was mich jetzt noch stört, ist dass dieser ganze Bereich sich nicht genügend vom Bild abhebt. Und um das zu ändern, werde ich ein Bootstrap eigenes Element verwenden, nämlich einen sogenannten "Well" und werde mir diesen anpassen. Ich muss dazu zuallererst in meine Indexdatei und muss erst einen Bereich auswählen, der diese Klasse zugewiesen bekommt. Ich bin hier in meiner Sektion "Home" und mache hier ein "div" mit der Klasse "well". Jetzt muss ich noch das schließende Tag an seine richtige Position bringen, nämlich hier ans Ende des Zitats. Ich speichere das, und wir sehen uns jetzt mal den "well" in seiner ursprünglichen Gestalt, sozusagen, an. Hier ist er nun, das heißt, ich habe einen Bereich mit einem farblichen Hintergrund, der zum Hintergrund meiner Navigation passt, und ich möchte zwei Sachen verändern. Erstens die Transparenz von diesem Bereich "well", der mir schon das Bild jetzt ziemlich abschneidet und erdrückt, und zweitens möchte ich das Ganze ein bisschen hinauf rutschen lassen, damit er im Himmel ist, über den gesamten Bergen. Gesagt, getan. Ich gehe wieder zurück in meinen Bootstrap-Bereich und werde mir jetzt zuerst mal den SCSS-Teil suchen, der sich um "well"-s kümmert. Hier ist er. Und nachdem ich sonst keinen Zusatz verwendet habe, ist der "well" quasi, der für mich in Frage kommt, dieser hier. Das ist der ganz normale "well", mit Strg+C kopiere ich ihn mir, weil ich ihn mir ja für meinen eigenen Teil anpassen möchte. Und ich habe hier schon einiges für mein "Home" definiert, und der "well" ist Teil von "Home", das heißt, ich werde ihn auch in "Home" einbetten. Mit Strg+V kommt er hierher. Und Achtung, "h1" ist ihrerseits oder seinerseits, wieder in "well" eingebettet. Das heißt, hier schneide ich die schließende Klammer aus und umklammere damit letztendlich auch noch meine "h1", und damit ich vor lauter Klammern den Überblick nicht verliere, mache ich mir hier einen kleinen Kommentar her, dass es sich hierbei um den "well" handelt. Gut! Ich möchte also einen transparenteren Hintergrund. Da wird Ihnen wahrscheinlich sofort einfallen, der Wert "opacity". Und das probieren wir jetzt mal. Ich sage Ihnen dann auch gleich, warum wir diesen Wert nicht verwenden werden. Aber er ist ein Klassiker, also, "opacity" bekommt den Wert von 0,8. Ich speichere das Ganze, und wenn ich mir das jetzt ansehe, werden Sie gleich erkennen, warum ich das als Weg nicht übernehmen werde. Bei "opacity" ist es so, dass nicht nur der Hintergrund etwas transparenter wird, sondern alles wird transparenter. Es wird auf sämtliche Kindelemente übernommen in der Kaskade und das heißt, ich habe hier plötzlich auch eine etwas durchsichtigere Schrift. Und das ist eigentlich nicht das, was ich möchte. Deswegen ist "opacity" nicht der Weg, den ich gehen möchte. Sondern es gibt eine eigene Funktion in "Sass", mit der ich das Ganze viel eleganter lösen kann. Ich habe hier meine Hintergrundfarbe, und ich kann jetzt dafür sorgen, dass die Hintergrundfarbe selbst transparenter wird. Das ist der Weg, den ich gehen werde, und die Funktion heißt "transparentise". Das heißt, ich schreibe "transparentise", und jetzt muss ich eigentlich nur noch einerseits sagen, was ich transparenter haben möchte, und dann muss ich noch sagen, wie viel ich es transparenter haben möchte. Was ist diese Hintergrundfarbe, und ich sage einmal, um 0,2 Einheiten soll es transparenter werden, ich speichere diesen Eintrag. Ich werde jetzt vielleicht gleich auch noch, wenn schon dann richtig klicken, hier den "margin-top" verändern. "margin-top" soll nämlich mit einem Minuswert, nämlich minus 40 Pixel, etwas nach oben geschoben werden. So, auch das speichere ich jetzt. Und ich wechsle zurück in meine Indexdatei und rufe mir meine Seite auf. So, und das gefällt mir doch schon viel besser. Die Schrift hat die Kraft, die sie haben sollte, die Transparenz ist leicht, wir könnten sie sogar noch ein bisschen stärker machen. Das heißt, ich könnte die Transparenz noch erhöhen, auf 0,3. Ich speichere das, wechsle wieder. Ja. Und das gefällt mir jetzt so eigentlich sehr gut. Das heißt, ich habe mich mit einem bestehenden Element so weit auseinander gesetzt, dass es jetzt meinen Ansprüchen genügt, indem ich es eingebettet habe in eines meiner schon bestehenden Elemente.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!