遮罩效果

Author: tangly1024

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "3.13.1",
+  "version": "3.13.2",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

public/css/theme-hexo.css

@@ -13,3 +13,13 @@
     color: #928CEE;
 }
 
+/* 设置了从上到下的渐变黑色 */
+#theme-hexo .header-cover::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
+}

public/css/theme-matery.css

@@ -0,0 +1,11 @@
+
+/* 设置了从上到下的渐变黑色 */
+#theme-matery .header-cover::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
+}

themes/hexo/components/Header.js

@@ -86,7 +86,7 @@ const Header = props => {
         <header id="header" style={{ zIndex: 1 }} className="w-full h-screen relative" >
 
             <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' : ''}`}/>
+                className={`header-cover 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>

themes/matery/LayoutBase.js

@@ -10,6 +10,7 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import FloatDarkModeButton from './components/FloatDarkModeButton'
 import throttle from 'lodash.throttle'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -36,6 +37,10 @@ const LayoutBase = props => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [])
 
+  if (isBrowser()) {
+    loadExternalResource('/css/theme-matery.css', 'css')
+  }
+
   return (
         <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
 

themes/matery/components/Header.js

@@ -102,7 +102,7 @@ const Header = props => {
             </div>
 
             <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
-                className={`w-full h-screen bg-cover ${CONFIG_MATERY.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
+                className={`header-cover w-full h-screen bg-cover ${CONFIG_MATERY.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
 
         </header>
   )