(-1)写在前面
我用的是chrome49，这篇是为后续做准备。重要性的调整以及毕业资料的整体导致最近没看JQuery和H5特效，以后只能晚上看了。
(0)准备
div长宽都为300px，我们一张大小小于div的图片1.jpg为例，将1.jpg设置为背景图片，添加样式background-repeat:no-repeat
(1) background-size:100% 100%;
缩放背景图片大小， background-size:100% 100%;中的%号的基值分别是div宽度和高度，所以图片会填充整个div。
(2) background-position:0% 10%;
background-position的值是%号时，基值分别是图片和div水平、高度差的绝对值，这里已垂直为例，只举例正值。
a.图片没有div大
background-size:100% 80%；那么background-position:0% 10%的作用是使图片距div上边6px,计算方式为(300-300*0.8)*0.1 =6,相当于往下推图片，所以background-position:0% 100%;总是是图片底部紧贴div底边
b.图片和div一样大
background-size:100% 100%;这里无论background-position:0% 10%；中的10%设置为什么都没有效果。
c.图片比div大
background-size:100% 120%，那么background-position:0% 10%作用是使图片距离div上边-6px，计算方式是(300*1.2-300)*0.1 = 6，相当于往上推图片。所以background-position:0% 100%;总是是图片底部紧贴div底边
(3)小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>为了生活</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#lol
{
300px;
height:400px;
background-image:-webkit-linear-gradient(90deg,#be1e1e, #be9b1e, #1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);
border:1px solid red;
background-repeat:no-repeat;
background-size:100% 700%;
animation:dnf 1s infinite alternate;
}
@keyframes dnf
{
100%
{
background-position:0% 100%;
}
}
</style>
<script type="text/javascript">
</script>
</head
<body>
<div id="lol"></div>
</body>
</html>