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

Hintergründe und Rahmen 1

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

Um die Aufgabe abzuschließen:

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

2. Geben Sie dem <h2> einen halbtransparenten schwarzen Hintergrund und machen Sie den Text weiß.

3. Fügen Sie ein Hintergrundbild hinzu und passen Sie es so an, dass es die Box vollständig abdeckt. Sie können das folgende Bild verwenden:

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

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<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 */
}

Das aktualisierte Styling sollte so aussehen:

.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;
}

Hintergründe und Rahmen 2

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

Um die Aufgabe abzuschließen:

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

2. Die Überschrift verwendet das star.png Bild als Hintergrundbild, mit einem einzigen zentrierten Stern auf der linken Seite und einem sich wiederholenden Muster von Sternen auf der rechten Seite. Sie können das folgende Bild verwenden:

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

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

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<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 */
}

Das aktualisierte Styling sollte so aussehen:

.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: Grundlagen der CSS-Gestaltung
• Weiter