css-单位%号-background-size-background-position-遁地龙卷风 - 遁地龙卷风_H5之家

(-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>

<head>

{

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>

</head

<body>

</body>

</html>