杭州微信网站建设网站模板炫酷
目录
背景颜色
任务描述
相关知识
背景色
编程要求
背景图片
任务描述
相关知识
背景图片
设置背景图片
平铺背景图像
任务要求
背景定位与背景关联
任务描述
相关知识
背景定位
背景关联
简写背景
编程要求
背景颜色
任务描述
本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景属性。
本关任务完成之后的效果图如下：
相关知识
为了完成本关任务，请大家认真阅读以下内容。
背景色
我们可以使用background-color为元素设置背景色，通常属性值为颜色名称或颜色编码。
因为HTML文档中body元素包含了HTML文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置body元素的background-color属性。
例如：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Hello World</title><style>.a2577130e-4a8d-4b9a-9232-e29a74953732 body { background-color: lightyellow; }.a2577130e-4a8d-4b9a-9232-e29a74953732 h1 { color: gray; background-color: palegreen; }.a2577130e-4a8d-4b9a-9232-e29a74953732 p { background-color: lightgray; }.a2577130e-4a8d-4b9a-9232-e29a74953732 </style>
</head>
<body><div><h1>CSS让网页样式更丰富</h1><p>这是一个段落</p></div>
</body>
</html>显示效果如图：
编程要求
学会了基本设置背景颜色的方式，现在让我们来实践一下吧。请在右侧的编辑框中修改style.css文件，完成如下要求：
-
设置
body的背景颜色(background)为象牙色(ivory)； -
设置段落
p的背景颜色(background)为浅蓝色(lightblue)。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello World</title><link rel="stylesheet" href="step1/CSS/style.css">
</head><body><h1>CSS让网页样式更丰富</h1><p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
</body></html>
背景图片
任务描述
本关任务：在本关中，我们将学习如何使用CSS去更改网页的背景图片。
本关任务完成之后的效果图如下：
相关知识
背景图片
设置背景图片
我们可以使用background-image属性设置元素的背景属性，常见的网页背景图就是这样设置的。其中，属性值通过url指定图片链接。
书写格式：
background-image: url("图片链接")例如：
<head><meta charset="utf-8"><title>Hello World</title><style>.a8652a48d-a67e-42bf-8cc8-25d03b8b0089 body { /*设置背景图片*/background-image: url("./Assert/memphis-colorful.png")}.a8652a48d-a67e-42bf-8cc8-25d03b8b0089 div {width: 90%;height: 100%;margin: auto;background-color: #FCFDF8;}.a8652a48d-a67e-42bf-8cc8-25d03b8b0089 </style>
</head>显示效果如图：
本例设置了body背景图像。
平铺背景图像
指定了背景图像之后，默认背景图是平铺重复显示。如果想要设置图像在水平方向、垂直方向平铺或其他方式，可以设置background-repeat属性。
具体属性值设置如下：
| 样式 | 属性值 |
|---|---|
| 水平平铺重复 | repeat-x |
| 垂直平铺重复 | repeat-y |
| 不重复平铺 | no-repeat |
例如：
- 默认平铺
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
}
repeat-x
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: repeat-x;
}
repeat-y
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: repeat-y;
}
no-repeat
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: no-repeat;
}
任务要求
请在右侧的编辑框中修改style.css文件，完成如下要求：
- 设置背景图片，图标
url地址为https://educoder.net/api/attachments/Rk9MdEZnbXhETFJDS3RvcEgyejZqUT09。
body {/* ********** BEGIN ********** *//*设置背景图片*/background-image: url("https://educoder.net/api/attachments/Rk9MdEZnbXhETFJDS3RvcEgyejZqUT09")/*设置背景图片模式*//* ********** END ********** */
}
div {width: 90%;height: 100%;margin: auto;
}
背景定位与背景关联
任务描述
本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景定位和背景关联属性。
本关任务完成之后的效果图如下：
相关知识
为了完成本关任务，请大家认真阅读以下内容。
背景定位
当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用background-position属性改变图像在背景中的位置:
举例如下：
body {/*设置背景图片*/background-image: url("https://www.educoder.net/attachments/download/211104");background-repeat: no-repeat;background-position: right top;
}显示效果如图：
本例中，设置right top代表放置在元素内边距区的右上角。
对于具体位置，大家可以使用如下关键字的组合：
| 属性值 |
|---|
top left |
top center |
top right |
center left |
center center |
center right |
bottom left |
bottom center |
bottom right |
如果值定义了一个关键词，那么第二个值将是"center"。当然也可以使用百分比和长度值，现在只作为了解。
背景关联
当页面较长时，滚动页面，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用background-attachment属性，将其值设置为fixed。
body {background-image: url("https://data.educoder.net/api/attachments/WU9BRTVWRWF2VDduWmNQOFFWWmdUQT09");background-repeat: no-repeat;background-attachment: fixed;
}
简写背景
从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。
例如：
body {background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
}使用简写属性时，属性值的顺序为：
-
background-color； -
background-image； -
background-repeat； -
background-attachment； -
background-position。
以上属性无需全部使用，大家可以按照页面设置使用。
编程要求
请在右侧的编辑框中修改style.css文件，以**简写背景**的方式，设置背景图片，满足如下要求：
-
图片地址:
https://educoder.net/api/attachments/WU9BRTVWRWF2VDduWmNQOFFWWmdUQT09； -
图片模式:
no-repeat； -
背景图片定位:
right top； -
设置背景关联:
fixed。
body {margin-right: 200px;/* ********** BEGIN ********** *//*设置背景图片*/background: url("https://educoder.net/api/attachments/WU9BRTVWRWF2VDduWmNQOFFWWmdUQT09") no-repeat fixed right top;/* ********** END ********** */}div {width: 90%;height: 100%;margin: auto;}