From 0c4245e159563455105e0569a81dd34ed462b839 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Fri, 13 Oct 2023 16:56:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=8C=E7=BA=A7banner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 about.html     |  3 ++-
 business.html  |  3 ++-
 contact.html   |  3 ++-
 css/style.css  | 15 ++++++++++++---
 css/style.less | 16 +++++++++++++---
 detail.html    |  3 ++-
 story.html     |  3 ++-
 7 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/about.html b/about.html
index 020d687..a19d1ef 100644
--- a/about.html
+++ b/about.html
@@ -35,7 +35,8 @@
         </div>
     </div>
     <div class="container">
-        <div class="section sec-banner" style="background-image: url('/images/banner2.png');">
+        <div class="section sec-banner">
+            <img class="media" src="images/banner2.png" alt="">
             <div class="banner-text">
                 <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
                 <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>
diff --git a/business.html b/business.html
index c897ab5..360a64b 100644
--- a/business.html
+++ b/business.html
@@ -35,7 +35,8 @@
         </div>
     </div>
     <div class="container">
-        <div class="section sec-banner" style="background-image: url('/images/banner2.png');">
+        <div class="section sec-banner">
+            <img class="media" src="images/banner2.png" alt="">
             <div class="banner-text">
                 <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
                 <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>
diff --git a/contact.html b/contact.html
index 3c1f4d8..895df7d 100644
--- a/contact.html
+++ b/contact.html
@@ -35,7 +35,8 @@
         </div>
     </div>
     <div class="container">
-        <div class="section sec-banner" style="background-image: url('/images/banner2.png');">
+        <div class="section sec-banner">
+            <img class="media" src="images/banner2.png" alt="">
             <div class="banner-text">
                 <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
                 <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>
diff --git a/css/style.css b/css/style.css
index 9d230d2..391dcc7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -312,16 +312,25 @@
   color: #E72A3A;
 }
 .section.sec-banner {
+  position: relative;
   width: 100%;
   height: 4.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
+}
+.section.sec-banner .media {
+  z-index: 5;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 .section.sec-banner .banner-text {
+  position: relative;
+  z-index: 10;
   padding-top: 0.6rem;
 }
 .section.article-detail {
diff --git a/css/style.less b/css/style.less
index 646c90e..ced5535 100644
--- a/css/style.less
+++ b/css/style.less
@@ -404,16 +404,26 @@
 }
 
 .section.sec-banner {
+    position: relative;
     width: 100%;
     height: 4.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
+
+    .media {
+        z-index: 5;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
 
     .banner-text {
+        position: relative;
+        z-index: 10;
         padding-top: 0.6rem;
     }
 }
diff --git a/detail.html b/detail.html
index 3977b60..b7a2695 100644
--- a/detail.html
+++ b/detail.html
@@ -35,7 +35,8 @@
         </div>
     </div>
     <div class="container">
-        <div class="section sec-banner" style="background-image: url('/images/banner2.png');">
+        <div class="section sec-banner">
+            <img class="media" src="images/banner2.png" alt="">
             <div class="banner-text">
                 <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
                 <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>
diff --git a/story.html b/story.html
index 775e434..93bef41 100644
--- a/story.html
+++ b/story.html
@@ -35,7 +35,8 @@
         </div>
     </div>
     <div class="container">
-        <div class="section sec-banner" style="background-image: url('/images/banner2.png');">
+        <div class="section sec-banner">
+            <img class="media" src="images/banner2.png" alt="">
             <div class="banner-text">
                 <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
                 <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>