fix/星空、彩带动效层级

This commit is contained in:
tangly1024.com
2023-03-24 12:28:22 +08:00
parent bb1ddcec48
commit 876fa07594
3 changed files with 13 additions and 28 deletions

View File

@@ -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>
)
}

View File

@@ -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>

View File

@@ -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>
)
}