CSS 技能测试：背景与边框

发表于
在 MDN 文档学习 CSS 的记录

题目链接

任务一

题目要求：

  • 令这个盒子的边框宽度为 5px，且为黑色实心（solid）的，圆角半径为 10px。
  • 添加背景图片（使用 balloons.jpg URL），调整它的大小，令其覆盖整个盒子。
  • 给予 <h2> 一个半透明的黑色背景颜色，并使文本为白色。

HTML 代码：

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

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
.box {
  border: 5px solid black;
  border-radius: 10px;
  background-image:url(balloons.jpg);
  background-size: cover;
}

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

任务二

题目要求：

  • 给这个盒子加一个 5px 的淡蓝色（lightblue）边框，设定左上角圆角半径为 20px，右下角圆角半径为 40px。
  • 标题使用 star.png 图像作为背景图像，左边是一颗居中的星星，右边是重复的星星图案。
  • 确保标题文本不覆盖图像，并且居中——你将需要使用在以前的课程中学到的技术来实现这一点。

HTML 代码：

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

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
.box {
  border: 5px solid lightblue;
  border-radius: 20px 0 40px 0;
}

h2 {
  background-image: url(star.png),url(star.png);
  background-position: left,right;
  background-repeat: no-repeat,repeat-y;
  text-align: center;
  padding: 0 15%;
}