第1关：CSS背景相关的概念
1、下列选项中，可用于设置背景颜色的属性是（ ）
A、
bgcolor
B、
color
C、
back-color
D、
background-color
答案：D
2、将背景的绘制区设置到内容区，应使用background-clip属性中的（ ）值。
A、
content-box
B、
border-box
C、
padding-box
D、
none-box
答案：A
3、在CSS3背景图属性中，可以设置背景图的平铺是（ ）。
A、
bcckground-position
B、
background-attachment
C、
background-repeat
D、
background-origin
答案：C
4、在CSS3新增的background-size属性中，（ ）是参考父元素宽高来设置图像宽度和高度的。
A、
50% 50%
B、
50px 50px
C、
cover
D、
contain
答案：A
5、CSS样式background-position:-5px 10px代表的意义是（ ）。
A、
背景图片向右偏移5px,向上偏移10px
B、
背景图片向右偏移5px,向下偏移10px
C、
背景图片向左偏移5px,向上偏移10px
D、
背景图片向左偏移5px,向下偏移10px
答案：D
第2关：CSS-背景色的设置
任务描述
本关任务：设置背景色。
相关知识
为了完成本关任务，你需要掌握：CSS3中背景色的设置方法。
背景色的设置
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标签中的背景图，具体要求如下：
（1）背景图的路径为https://www.educoder.net/api/attachments/2478800
（2）该背景图随内容滚动
（3）保持背景图的横纵比，将图像缩放成将完全覆盖背景定位区域的最小大小。
（4）背景图的定位设置：水平向左偏移-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>
1340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
