任务 1
在此任务中，我们要为页面标题添加背景、边框和一些基本样式。
完成任务
-
为该框添加 5px 的黑色实线边框，边框圆角为 10px。
-
为
<h2>添加半透明黑色背景色，并将文本设置为白色。 -
添加一个背景图像，并调整其大小以覆盖整个框。您可以使用以下图像：
https://mdn.github.io/shared-assets/images/examples/balloons.jpg
您的最终结果应如下面的图片所示
html
<div class="box">
<h2>Backgrounds & Borders</h2>
</div>
css
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 */
}
点击此处显示解决方案
您应该使用 border、border-radius、background-image 和 background-size，并理解如何使用 RGB 颜色使背景色部分透明。
css
.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;
}
任务 2
在此任务中，我们要为装饰性框添加背景图像、边框和其他一些样式。
完成任务
-
为该框添加 5px 的浅蓝色边框，并将左上角圆角设置为 20px，右下角圆角设置为 40px。
-
标题使用
star.png图像作为背景图像，左侧为单个居中显示的星星，右侧为重复的星星图案。您可以使用以下图像：https://mdn.github.io/shared-assets/images/examples/star.png
-
确保标题文本不覆盖图像，并且文本居中——您需要使用先前课程中学到的技巧来实现这一点。
您的最终结果应如下面的图片所示
html
<div class="box">
<h2>Backgrounds & Borders</h2>
</div>
css
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 */
}
点击此处显示解决方案
您需要为标题添加内边距，使其不覆盖星形图像——这与先前 盒子模型课程 中的学习内容相关。文本应使用 text-align 属性对齐。
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;
}