img 改为 背景

@@ -9,7 +9,7 @@
             </div>
             <div class="live-loading-container">
                 <div class="live-video-loading">
-                    <img src="/img/activity/live/live/live-loading.gif">
+                    <div class="img"></div>
                     <p>加载中</p>
                 </div>
                 <div class="live-loading-cover" style="background-image: url('{{pic}}');"></div>
@@ -24,24 +24,22 @@
             </div>
             <!--点赞-->
             <div class="live-like-pannel">
-                <div id="live_like_pannel" class="animate_pannel">
-
-                </div>
-                <img class="like-main" src="/img/activity/live/live/like_icon1.png">
+                <div id="live_like_pannel" class="animate_pannel"></div>
+                <div class="like-main"></div>
                 <span id="like_num">0</span>
 
             </div>
             <!--播放按钮-->
             <div class="live-video-play-button">
                 <a href="javascript:void(0)">
-                    <img src="/img/activity/live/live/btn_play.png">
+                    <div class="img"></div>
                 </a>
             </div>
 
             <!--直播状态-->
             <div class="live-status">
                 <div class="overflow-hidden">
-                    <img src="/img/activity/live/live/app_logo.png">
+                    <div class="img"></div>
                     <div class="live-time">
                         <span>YOHO!直播 ·</span>&nbsp;<span id="live_time"></span>
                     </div>

@@ -51,9 +51,12 @@
     border-radius: 2.5rem;
     border-radius: 2.5rem;
 
-    img {
-        background-color: rgba(0, 0, 0, 0.5);
+    .img {
+        background: rgba(0, 0, 0, 0.5) url('/img/activity/live/live/btn_play.png') center center;
+        background-size: contain;
         border-radius: 50%;
+        width: 165px;
+        height: 165px;
     }
 }
 
@@ -87,10 +90,13 @@
     text-align: center;
 }
 
-.live-video-loading img {
+.live-video-loading .img {
     position: relative;
-    width: 3.3rem;
+    width: 153px;
+    height: 110px;
     margin: 0 auto;
+    background: url('/img/activity/live/live/live-loading.gif') no-repeat;
+    background-size: contain;
 }
 
 .live-video-loading p {
@@ -254,9 +260,9 @@
 .live-like-pannel {
     display: none;
     position: absolute;
-    right: 1rem;
-    bottom: 3rem;
-    width: 2.5rem;
+    right: 25px;
+    bottom: 130px;
+    width: 110px;
     text-align: center;
     color: #ffffff;
     text-shadow: 0 0 5px black;
@@ -264,10 +270,10 @@
 }
 
 .live-like-pannel .like-main {
-    position: relative;
-    bottom: -0.5rem;
-    left: 0;
-
+    width: 110px;
+    height: 110px;
+    background: url('/img/activity/live/live/like_icon1.png') no-repeat;
+    background-size: contain;
 }
 
 .live-like-pannel span {
@@ -374,11 +380,13 @@
     text-shadow: 0 0 5px black;
 }
 
-.live-status img {
+.live-status .img {
     width: 70px;
     height: 70px;
     float: left;
     margin-right: 16px;
+    background: url('/img/activity/live/live/app_logo.png') no-repeat;
+    background-size: contain;
 }
 
 .live-time {