本文已参与「新人创作礼」活动，一起开启掘金创作之路。
第1关：CSS背景相关的概念
通关知识
1、下列选项中，可用于设置背景颜色的属性是（D）
A、bgcolor
B、color
C、back-color
D、background-color
2、将背景的绘制区设置到内容区，应使用background-clip属性中的（A）值。
A、content-box
B、border-box
C、padding-box
D、none-box
3、在CSS3背景图属性中，可以设置背景图的平铺是（C）。
A、bcckground-position
B、background-attachment
C、background-repeat
D、background-origin
4、在CSS3新增的background-size属性中，（A）是参考父元素宽高来设置图像宽度和高度的。
A、50% 50%
B、50px 50px
C、cover
D、contain
5、CSS样式background-position:-5px 10px代表的意义是（D）。
A、背景图片向右偏移5px,向上偏移10px
B、背景图片向右偏移5px,向下偏移10px
C、背景图片向左偏移5px,向上偏移10px
D、背景图片向左偏移5px,向下偏移10px
第2关：CSS-背景色的设置
相关知识
背景色的设置
CSS中使用background-color属性设置元素的背景色。语法格式如下： 选择器{background-color:颜色值;}
编程要求
请在右侧编辑器的Begin - End区域内补全样式代码，使得网页背景色为#add。
通关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-背景色的设置</title>
<style type="text/css">
h2{font:微软雅黑;
text-align:center;
}
#p1{font-size:13px;
color:#979797;
text-align:center;
}
hr{border:1px solid #CCCCCC;}
#p2{text-indent:2em;}
span{color:blue;}
.background{
/* ********* Begin ********* */
background-color: #add
/* ********* End ********* */
}
</style>
</head>
<body class="background">
<div class="backgroundImage">
<h2>新媒体的大势所趋</h2>
<p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p>
<hr size="2" color="#CCCCCC" />
<p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
</div>
</body>
</html>
第3关：CSS-背景图的设置
相关知识
需要掌握：CSS3中设置背景图的属性，如background-image、background-position、background-position、background-size等。
编程要求
请在右侧编辑器的Begin - End区域内补全样式代码，用于设置div标签中的背景图，具体要求如下：
- 背景图的路径为www.educoder.net/api/attachm…
- 该背景图随内容滚动
- 保持背景图的横纵比，将图像缩放成将完全覆盖背景定位区域的最小大小。
- 背景图的定位设置：水平向左偏移-260px，垂直偏移0px。
通关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-背景色的设置</title>
<style type="text/css">
h2{font:微软雅黑;
text-align:center;
}
#p1{font-size:13px;
color:#979797;
text-align:center;
}
hr{border:1px solid #CCCCCC;}
#p2{text-indent:2em;}
span{color:blue;}
.background{background-color:#add;}
.backgroundImage{
width:360px;
height:240px;
overflow:scroll;
padding:30px;
border:3px solid #30F;
/* ********* Begin ********* */
background-image: url(https://www.educoder.net/api/attachments/2478800);
background-attachment: scroll;
background-size: cover;
background-position: -260px 0px;
/* ********* End ********* */
}
</style>
</head>
<body class="background">
<div class="backgroundImage">
<h2>新媒体的大势所趋</h2>
<p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p>
<hr size="2" color="#CCCCCC" />
<p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
</div>
</body>
</html>
