Testen Sie Ihre Fähigkeiten: Hintergründe und Rahmen

Aufgabe 1

In dieser Aufgabe möchten wir, dass Sie einem Seitenkopf einen Hintergrund, einen Rahmen und einige grundlegende Stile hinzufügen.

Um die Aufgabe zu vervollständigen:

1. Geben Sie der Box einen 5px breiten schwarzen festen Rahmen mit abgerundeten Ecken von 10px.

2. Geben Sie dem <h2> einen halbtransparenten schwarzen Hintergrund und setzen Sie den Text in Weiß.

3. Fügen Sie ein Hintergrundbild hinzu und skalieren Sie es so, dass es die Box bedeckt. Sie können das folgende Bild verwenden:

   https://mdn.github.io/shared-assets/images/examples/balloons.jpg
   

Ihr Endergebnis sollte wie das unten stehende Bild aussehen:

<div class="box">
  <h2>Backgrounds & Borders</h2>
</div>

body {
  padding: 1em;
  font: 1.2em / 1.5 sans-serif;
}

* {
  box-sizing: border-box;
}

.box {
  padding: 0.5em;
}

.box {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

.box {
  border: 5px solid black;
  border-radius: 10px;
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  background-size: cover;
}

h2 {
  background-color: rgb(0 0 0 / 50%);
  color: white;
}

Aufgabe 2

In dieser Aufgabe möchten wir, dass Sie dekorativen Boxen Hintergrundbilder, einen Rahmen und einige andere Stile hinzufügen.

Um die Aufgabe zu vervollständigen:

1. Geben Sie der Box einen 5px breiten hellblauen Rahmen und runden Sie die obere linke Ecke mit 20px und die untere rechte Ecke mit 40px ab.

2. Der Überschrift star.png wird als Hintergrundbild verwendet, mit einem einzelnen zentrierten Stern links und einem sich wiederholenden Muster von Sternen rechts. Sie können das folgende Bild verwenden:

   https://mdn.github.io/shared-assets/images/examples/star.png
   

3. Stellen Sie sicher, dass der Überschriftstext nicht über dem Bild liegt und zentriert ist — Sie müssen Techniken anwenden, die Sie in vorherigen Lektionen gelernt haben, um dies zu erreichen.

Ihr Endergebnis sollte wie das unten stehende Bild aussehen:

<div class="box">
  <h2>Backgrounds & Borders</h2>
</div>

body {
  padding: 1em;
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}
.box {
  width: 300px;
  padding: 0.5em;
}

.box {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

.box {
  border: 5px solid lightblue;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 40px;
}

h2 {
  padding: 0 40px;
  text-align: center;
  background:
    url("https://mdn.github.io/shared-assets/images/examples/star.png")
      no-repeat left center,
    url("https://mdn.github.io/shared-assets/images/examples/star.png") repeat-y
      right center;
}

• Zurück
• Übersicht: Grundlegende Informationen zur CSS-Gestaltung
• Weiter