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>