(-1)寫在前面 我用的是chrome49，這篇是為後續做準備。重要性的調整以及畢業資料的整體導致最近沒看JQuery和H5特效，以後只能晚上看了。 (0)準備 div長寬都為300px，我們一張大小小於div的圖片1.jpg為例，將1.jpg設置為背景圖片，添加樣式background-repea ...
(-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
{
width: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>
