From 876fa0759441b980a6a26e6fabe2a0a5208c1694 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 24 Mar 2023 12:28:22 +0800
Subject: [PATCH] =?UTF-8?q?fix/=E6=98=9F=E7=A9=BA=E3=80=81=E5=BD=A9?=
 =?UTF-8?q?=E5=B8=A6=E5=8A=A8=E6=95=88=E5=B1=82=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/StarrySky.js            |  2 +-
 themes/hexo/components/Header.js   | 23 +++++++----------------
 themes/matery/components/Header.js | 16 +++++-----------
 3 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/components/StarrySky.js b/components/StarrySky.js
index 089a95b9..4cb5c8a5 100644
--- a/components/StarrySky.js
+++ b/components/StarrySky.js
@@ -7,7 +7,7 @@ export const StarrySky = () => {
   }, [])
   return (
     <div className="relative">
-      <canvas id="starry-sky-vixcity" className="fixed pointer-events-none"></canvas>
+      <canvas id="starry-sky-vixcity" style={{zIndex:1}} className="top-0 fixed pointer-events-none"></canvas>
     </div>
   )
 }
diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Header.js
index 87e83e10..658e2e77 100644
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -83,23 +83,14 @@ const Header = props => {
   }, throttleMs))
 
   return (
-        <header
-            id="header"
-            className="w-full h-screen bg-black text-white relative"
-        >
-            <div className={`w-full h-full ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`}>
-                {/* <Image src={siteInfo.pageCover} fill
-                    style={{ objectFit: 'cover' }}
-                    className='opacity-70'
-                    placeholder='blur'
-                    blurDataURL='/bg_image.jpg' /> */}
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
-            </div>
+        <header id="header" style={{ zIndex: 1 }} className="w-full h-screen relative" >
 
-            <div className="absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
-                <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
-                <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
+                className={`w-full h-screen bg-cover ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
+
+            <div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
+                <div className='text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
+                <div className='mt-2 h-12 items-center text-center shadow-text text-lg'>
                     <span id='typed' />
                 </div>
 
diff --git a/themes/matery/components/Header.js b/themes/matery/components/Header.js
index 454e5249..69299b3e 100644
--- a/themes/matery/components/Header.js
+++ b/themes/matery/components/Header.js
@@ -86,18 +86,9 @@ const Header = props => {
 
   return (
         <header
-            id="header"
-            className="md:bg-fixed w-full h-screen bg-black text-white relative"
+            id="header" style={{ zIndex: 1 }}
+            className=" w-full h-screen bg-black text-white relative"
         >
-            <div className='w-full h-full absolute'>
-                {/* <Image src={siteInfo.pageCover} fill
-                    style={{ objectFit: 'cover' }}
-                    className='opacity-70'
-                    placeholder='blur'
-                    blurDataURL='/bg_image.jpg' /> */}
-                     {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
-            </div>
 
             <div className="absolute flex flex-col h-full items-center justify-center w-full ">
                 <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
@@ -110,6 +101,9 @@ const Header = props => {
                 </div>
             </div>
 
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
+                className={'w-full h-screen bg-cover '}/>
+
         </header>
   )
 }