论坛

标题: 为什么是正数和负数 [打印本页]
作者: 星星的眼泪是我    时间: 2020-3-29 10:37
标题: 为什么是正数和负数
在backgtound-pasition中为什么xy轴都是负数，不是x轴向右是正的，y轴向下是负的吗？还有案例中top不是向下偏移吗？为什么是正的呢？
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>360</title>
  6.        
  7.        
  8.        
  9.         <style>
  10.        
  11.                 @keyframes dh{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
  12.                 .out{width:100%;height: 1166px;background: url("img/safe2.jpg") content-box;position: relative;}
  13.                 .out .box{width: 660px;height: 660px;border: 2px solid #FF272B;position: absolute;left: 50%;margin-left: -330px;top: 590px;margin-top: -330px;}
  14.                 .out .iconBig{ background:url( "img/dp.png") no-repeat; width:150px; height:180px;position: absolute;left: 50%;margin-left: -45px;top: 50%;margin-top:-70px; }
  15.                 .box .line{ width:330px; height:450px; background:url("img/rada.png") no-repeat center; animation: dh 3s  linear infinite;  position:absolute; top:0; left:0;transform-origin: 340px 320px}
  16.                 .out .icon{background:url("img/dp.png") no-repeat;position: absolute;}
  17.                 .out .icon:nth-child(1){width: 49px;height: 49px;background-position: -180px -17px;left:150px;top:90px;}
  18.         .out .icon:nth-child(2){width: 64px;height: 64px;background-position: -268px -12px;left: 450px;top: 60px;}
  19.                 .out .icon:nth-child(3){width:36px;height:36px;background-position: -362px -24px;left: 440px;top:300px;}
  20.                 .out .icon:nth-child(4){width:54px;height:54px;background-position: -418px -17px;left: 540px;top:360px;}
  21.                 .out .icon:nth-child(5){width: 58px;height: 58px;background-position: -180px -99px;left:390px;top:490px;}
  22.                 .out .icon:nth-child(6){ width:51px; height:51px; background-position:-269px -104px; left:110px; top:490px;}
  23.         .out .icon:nth-child(7){ width:58px; height:58px; background-position:-179px -99px; left:99px; top:260px;}

  25.        
  26.        
  27.        
  28.        
  29.        
  30.        
  31.         </style>
  32. </head>

  34. <body>
  35.        
  36.        
  37.         <div class="out
  38. <div class="out">
  39.         <div class="box">
  40.    
  41.             <div class="icon"></div>
  42.         <div class="icon"></div>
  43.         <div class="icon"></div>
  44.         <div class="icon"></div>
  45.         <div class="icon"></div>
  46.         <div class="icon"></div>
  47.         <div class="icon"></div>
  48.                 <div class="icon"></div>
  49.                                                  
  50.         <div class="line"></div>
  51.         <div class="iconBig"></div></div>
  52. </body>
  53. </html>
复制代码







欢迎光临 论坛 (http://bbs.qinxue.com/) Powered by Discuz! X3.1