Testen Sie Ihre Fähigkeiten: Hintergründe und Ränder

Ziel dieses Tests ist es, zu bewerten, ob Sie die Hintergründe und Ränder von Boxen in CSS verstehen.

Hinweis: Klicken Sie auf "Play" in den untenstehenden Codeblöcken, um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Clipboard-Symbol) und in einen Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie nicht weiterkommen, können Sie uns in einem unserer Kommunikationskanäle erreichen.

Aufgabe 1

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

Geben Sie der Box einen 5px schwarzen festen Rand mit abgerundeten Ecken von 10px.
Geben Sie dem <h2> einen halbtransparenten schwarzen Hintergrund und machen Sie den Text weiß.
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 endgültiges Ergebnis sollte wie das folgende Bild aussehen:

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

Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

html

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

css

.box {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

Klicken Sie hier, um die Lösung anzuzeigen

Sie sollten border, border-radius, background-image und background-size verwenden und verstehen, wie man RGB-Farben verwendet, um eine Hintergrundfarbe teilweise transparent zu machen:

css

.box {
  border: 5px solid #000;
  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: #fff;
}

Aufgabe 2

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

Geben Sie der Box einen 5px hellblauen Rand und runden Sie die obere linke Ecke 20px und die untere rechte Ecke 40px ab.
Die Überschrift verwendet das Bild star.png als Hintergrundbild, mit einem einzelnen 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
```
Stellen Sie sicher, dass der Überschriftentext das Bild nicht überlagert und zentriert ist — Sie müssen Techniken verwenden, die in früheren Lektionen gelernt wurden, um dies zu erreichen.

Ihr endgültiges Ergebnis sollte wie das folgende Bild aussehen:

Das Bild zeigt eine Box mit einem blauen Rand, der in der oberen linken und unteren rechten Ecke abgerundet ist. Links vom Text ist ein einzelner Stern, rechts drei Sterne.

Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

html

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

css

.box {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

Klicken Sie hier, um die Lösung anzuzeigen

Sie müssen der Überschrift Polsterung hinzufügen, damit sie das Sternbild nicht überlagert - dies bezieht sich auf das Lernen aus der früheren Kastenmodell-Lektion. Der Text sollte mit der text-align-Eigenschaft ausgerichtet werden:

css

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

Siehe auch

Grundlagen der CSS-Stilgestaltung