2020-02-25多层图片定位 缩放无影响

image.png

给三个图的父级相对定位
给三个图绝对定位

       

         

           
           山东省分布地图
         
              
         

             
         
                   
         

                 
       
       

css

.img_box{
   z-index: 3;
   /* position: relative;
   top: -580px;
   left: 220px; */
   position: absolute;
   top:30px;
   left: 30px;
   width: 100%;
   height: 100%;
   opacity: 0.2;
}
.img_box img{
   /* width:550px;
   height: 550px; */
   width:50%;
   height: 80%;
}

#xuanzhun{
-webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 20s;
   -moz-transition-property: -moz-transform;
   -moz-transition-duration: 20s;
   -webkit-animation: rotate 23s linear infinite;
   -moz-animation: rotate 23s linear infinite;
   -o-animation: rotate 23s linear infinite;
   animation: rotate 23s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
   to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
   to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
   to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
   to{transform: rotate(359deg)}
}

#chart_5{
 position: absolute;
}
#canvas {
position: absolute;
/* position: relative;
top:-1120px; */
width: 100%;
height: 100%;
display: block;
opacity: .8;
z-index: 2;
padding: 20px;
border-radius: 25px;
box-sizing: border-box;
box-shadow: inset -10px 0px 15px #034c6a inset, /*左边阴影*/ 0px -10px 15px #034c6a inset, /*上边阴影*/ 10px 0px 15px #034c6a inset, /*右边阴影*/ 0px 10px 15px #034c6a inset;
}