遁地沙尘暴

2019-05-03 22:47 来源:未知

(-1)写在前面

      我用的是chrome49,这篇是为后续做准备。重要性的调整以及毕业资料的整体导致最近没看JQuery和H5特效,以后只能晚上看了。

css-单位%号-background-size-background-position-遁地龙卷风,遁地龙卷风

(0)准备

div长宽都为300px,我们一张大小小于div的图片1.jpg为例,将1.jpg设置为背景图片,添加样式background-repeat:no-repeat

(-1)写在前面

      我用的是chrome49,这篇是为后续做准备。重要性的调整以及毕业资料的整体导致最近没看JQuery和H5特效,以后只能晚上看了。

(1) background-size:100% 100%;

缩放背景图片大小, background-size:100% 100%;中的%号的基值分别是div宽度和高度,所以图片会填充整个div。

(0)准备

div长宽都为300px,我们一张大小小于div的图片1.jpg为例,将1.jpg设置为背景图片,添加样式background-repeat:no-repeat

(2) background-position:0% 10%;

background-position的值是%号时,基值分别是图片和div水平、高度差的绝对值,这里已垂直为例,只举例正值。

(1) background-size:100% 100%;

缩放背景图片大小, background-size:100% 100%;中的%号的基值分别是div宽度和高度,所以图片会填充整个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底边

(2) background-position:0% 10%;

background-position的值是%号时,基值分别是图片和div水平、高度差的绝对值,这里已垂直为例,只举例正值。

b.图片和div一样大

background-size:100% 100%;这里无论background-position:0% 10%;中的10%设置为什么都没有效果。

a.图片没有div大  

background-size:100% 80%;那么background-position:0% 10%的作用是使图片距div上边6px,计算方式为(300-300*0.8)*0.1 =6,相当于往下推图片,所以background-position:0% 100%;总是是图片底部紧贴div底边

c.图片比div大

background-size:100% 120%,那么background-position:0% 10%作用是使图片距离div上边-6px,计算方式是(300*1.2-300)*0.1 = 6,相当于往上推图片。所以background-position:0% 100%;总是是图片底部紧贴div底边

b.图片和div一样大

background-size:100% 100%;这里无论background-position:0% 10%;中的10%设置为什么都没有效果。

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

                        

                         

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>                 

                        

                         

(-1)写在前面 我用的是chrome49,这篇是为后续做准备。重要性的调整以及毕...

TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:遁地沙尘暴