通过 div 显示背景图

docs/css/style.css

@@ -24,12 +24,7 @@ html {
 }
 
 body {
-    background-attachment: fixed;
+    background-color: #999;
-    background-color: #F9F9F9;
-    background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
     color: #000;
     cursor: default;
     display: flex;
@@ -216,6 +211,22 @@ footer p {
     width: 1.5em;
 }
 
+/* 背景 */
+
+.page-background {
+    z-index: -100;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-attachment: fixed;
+    background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
 /* 滚动条 */
 
 ::-webkit-scrollbar {
@@ -243,7 +254,7 @@ footer p {
     left: 0;
     bottom: -110%;
     opacity: 0;
-    transition: all 1.0s;
+    transition: all 0.5s;
 }
 
 .tool-panel-bar {

docs/css/tool.css

@@ -9,13 +9,24 @@ html {
 }
 body {
     padding: 20px 0 50px 0;
+    background-color: #999;
+    scroll-behavior: smooth;
+}
+
+/* 背景 */
+
+.page-background {
+    z-index: -100;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
     background-attachment: fixed;
-    background-color: #F9F9F9;
     background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    scroll-behavior: smooth;
 }
 
 /* 滚动条 */
@@ -256,12 +267,25 @@ body {
     transition: all 0.5s;
 }
 .to-top:hover {
-    right: 25px;
+    animation: ToTopAnimation 0.5s ease-in-out;
-    bottom: 25px;
+}
-    height: 40px;
+
-    width: 40px;
+/* 动画 */
-    line-height: 40px;
+
-    font-size: 20px;
+@keyframes ToTopAnimation {
-    color: #FFF;
+    0% {
-    transform: rotate(360deg);
+    }
+    50% {
+        right: 25px;
+        bottom: 25px;
+        height: 40px;
+        width: 40px;
+        line-height: 40px;
+        font-size: 20px;
+        color: #FFF;
+    }
+    100% {
+        color: #2196F3;
+        transform: rotate(360deg);
+    }
 }

docs/index.html

@@ -1312,6 +1312,8 @@
             on <a href="https://unsplash.com/">Unsplash</a>
         </p>
     </footer>
+    <!-- 背景 -->
+    <div class="page-background"></div>
     <!-- JavaScript -->
     <script src="js/jquery-3.2.1.min.js"></script>
     <script src="js/slinky.min.js"></script>

docs/tool.html

@@ -160,6 +160,8 @@
     </div>
     <!-- 返回顶部 -->
     <div class="to-top" onclick="document.body.scrollTop = 0; document.documentElement.scrollTop = 0;">▲</div>
+    <!-- 背景 -->
+    <div class="page-background"></div>
     <!-- JavaScript -->
     <script src="js/tool.min.js"></script>
 </body>