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:

  1. Vergeben Sie der Box einen 5px schwarzen, soliden Rahmen mit abgerundeten Ecken von 10px.
  2. Fügen Sie ein Hintergrundbild hinzu (verwenden Sie die URL balloons.jpg) und passen Sie es so an, dass es die Box ausfüllt.
  3. Versehen Sie das <h2> mit einer halbtransparenten schwarzen Hintergrundfarbe und machen Sie den Text weiß.

Ihr Endergebnis sollte wie das unten gezeigte Bild aussehen:

Bild zeigt eine Box mit einem fotografischen Hintergrund, einem abgerundeten Rahmen und weißem Text auf einem halbtransparenten schwarzen Hintergrund.

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:

Bild zeigt eine Box mit einem blauen Rahmen, der an den Ecken oben links und unten rechts abgerundet ist. Links des Textes befindet sich ein einzelner Stern, rechts drei Sterne.

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.