开发者学堂课程【零基础学前端 HTML+CSS：图像的背景】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5146
图像的背景
内容介绍
一、背景图片设定的介绍
二、背景图片设定的操作示例
一、背景图片设定的介绍
背景图片设定
Background
CSS 从 1.0 发展到 2.0 最后发展到 3.0，CSS3.0 新增了许多的内容，常用特性如下：
1、CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。 //在CSS 旧版本里只能设定循环：一个横循环或者是纵循环
2、background-size 规定背景图片的尺寸。
3、background-size:cover;
4、cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 //可以设定自适应的背景
5、背景图像的某些部分也许无法显示在背景定位区域中
6、contain 把图像扩展至最大尺寸，以使其宽度和高度完全适应的内容区域。
早期的时候在 CSS1\ 和 2.1 的时代就有了设定背景图片的功能，现在还有新增加的属性可以适应屏幕分辨率的背景。
二、背景图片设定的操作示例
示例代码：
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<title></title>
<style>
body{
background:url(“images/Penguins.jpg”);
</style>
</head>
<body>
对上述代码进行修改，添加一行
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>使背景图片高度变长一点
效果如图：
再增加一个新的属性，是 size 的一个属性，background-size:cover ，也可以在这行代码前添加 webkit ，这是一个兼容的代码，添加之后在谷歌浏览器有更好的兼容性，这是根据浏览器的版本而定，如果版本较新，不添加也没有什么影响，建议还是添加上。添加上 cover 以后，使得这个背景拉伸的足够大。
效果如图：
将这张图片的水平长度和垂直长度的百分比变为 50% ，并保存。去除掉background-size:cover这行代码。
刷新后如图显示：
如果按照之前的方式，会显示重复的，但是添加上background-size:cover后，图像按照比例变大，优先从左向右，优先宽度变大，高度随着宽度的比例进行释放。
background-size:cover将 cover 变为 contain，能根据窗口的大小进行放缩。
