Testen Sie Ihre Fähigkeiten: Hintergründe und Rahmen
Ziel dieses Fähigkeitstests ist es, zu bewerten, ob Sie das Hintergründe und Rahmen von Boxen in CSS verstehen.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.
Aufgabe 1
In dieser Aufgabe möchten wir, dass Sie einem Seitenkopf einen Hintergrund, Rahmen und einige einfache Formatierungen hinzufügen:
- Vergeben Sie der Box einen 5px schwarzen, soliden Rahmen mit abgerundeten Ecken von 10px.
- Fügen Sie ein Hintergrundbild hinzu (verwenden Sie die URL
balloons.jpg
) und passen Sie es so an, dass es die Box ausfüllt. - Versehen Sie das
<h2>
mit einer halbtransparenten schwarzen Hintergrundfarbe und machen Sie den Text weiß.
Ihr Endergebnis sollte wie das unten gezeigte Bild aussehen:
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 2
In dieser Aufgabe möchten wir, dass Sie Hintergrundbilder, einen Rahmen und einige andere Stilmittel zu einer dekorativen Box hinzufügen:
- Vergeben Sie der Box einen 5px hellblauen Rahmen und runden Sie die obere linke Ecke um 20px und die untere rechte Ecke um 40px.
- Die Überschrift verwendet das Bild
star.png
als Hintergrundbild, mit einem einzelnen zentrierten Stern links und einem sich wiederholenden Muster von Sternen rechts. - Stellen Sie sicher, dass der Überschriftstext nicht über dem Bild liegt und zentriert ist – Sie müssen dafür Techniken verwenden, die Sie in den vorherigen Lektionen gelernt haben.
Ihr Endergebnis sollte wie das unten gezeigte Bild aussehen:
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.