Testen Sie Ihr Können: Hintergründe und Rahmen
Das Ziel dieses Tests ist es, Ihnen zu helfen zu beurteilen, ob Sie die Hintergründe und Rahmen von Boxen in CSS verstehen.
Hinweis: Wenn Sie Hilfe benötigen, lesen Sie unseren Anleitung zum Testen Ihrer Fähigkeiten. Sie können uns auch über einen unserer Kommunikationskanäle kontaktieren.
Hintergründe und Rahmen 1
In dieser Aufgabe möchten wir, dass Sie ein Hintergrund, einen Rahmen und einige grundlegende Stile zu einem Seitenkopf hinzufügen.
Um die Aufgabe abzuschließen:
-
Geben Sie der Box einen 5px schwarzen, festen Rahmen 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 passen Sie es so an, dass es die Box abdeckt. Sie können folgendes 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:
Klicken Sie hier, um die Lösung anzuzeigen
Sie sollten border, border-radius, background-image und background-size verwenden und verstehen, wie Sie RGB-Farben verwenden, um eine Hintergrundfarbe teilweise transparent zu machen:
.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:
-
Geben Sie der Box einen 5px hellblauen Rahmen und runden Sie die obere linke Ecke 20px und die untere rechte Ecke 40px.
-
Der Titel verwendet das
star.pngBild 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 folgendes Bild verwenden:https://mdn.github.io/shared-assets/images/examples/star.png
-
Stellen Sie sicher, dass der Titeltext 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:
Klicken Sie hier, um die Lösung anzuzeigen
Sie müssen dem Titel Padding hinzufügen, damit er nicht über dem Sternbild liegt - dies bezieht sich auf das Lernen aus der vorherigen Box-Modell-Lektion.
Der Text sollte mit der text-align Eigenschaft ausgerichtet werden:
.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;
}