feat: Add mask layer to footer

_config.yml

@@ -99,7 +99,7 @@ header:
     # In site directory (source/uploads): /uploads/avatar.png
     # You can also use a link of image.
     url:
-  # Mask effect of the top background image.
+  # Mask effect of the background image.
   mask:
     enable: true
     # Opacity of mask (value: 0 ~ 1).
@@ -143,6 +143,11 @@ footer:
     # In site directory (source/uploads): /uploads/avatar.png
     # You can also use a link of image.
     url:
+  # Mask effect of the background image.
+  mask:
+    enable: false
+    # Opacity of mask (value: 0 ~ 1).
+    opacity: 0.5
   # Copyright information.
   copyright:
     enable: true

layout/_partials/header/header.pug

@@ -20,7 +20,5 @@ div.header-info(style=`${
     theme.header.bg_image.enable &&
       page.top_image ? 'background: url(' + page.top_image + ') no-repeat center/cover;' : ''
   }`)
-  div.header-info-mask
-  div.header-info-inner
-    div.header-info-title= config.title
-    div.header-info-subtitle= config.subtitle
+  div.header-info-title= config.title
+  div.header-info-subtitle= config.subtitle

source/css/_common/components/footer/index.styl

@@ -12,17 +12,33 @@
   }
 
   &-inner {
+    position: relative;
     padding: 1rem;
     font-size: $font-size-footer;
     text-align: center;
     color: $footer-text-color;
     background-color: $footer-bg-color;
 
-    if (hexo-config('footer.bg_image.enable')) {
+    if (hexo-config('footer.bg_image.enable') && hexo-config('footer.bg_image.url')) {
+      z-index: $z-index-2;
       background: url(hexo-config('footer.bg_image.url')) no-repeat center center;
       background-size: cover;
     }
 
+    if (hexo-config('footer.mask.enable')) {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: $z-index-1;
+        width: 100%;
+        height: 100%;
+        background-color: alpha(#000, hexo-config('footer.mask.opacity'));
+      }
+    }
+
     a {
       color: $footer-link-color;
       transition-property: color;

source/css/_common/components/header/index.styl

 .header {
   &-inner {
+    position: relative;
     width: 100%;
     font-size: $font-size-header;
     background-color: $header-nav-bg-color;
@@ -9,6 +10,25 @@
     } else {
       height: convert(hexo-config('header.height') || '80vh');
     }
+
+    if (hexo-config('header.bg_image.enable') && hexo-config('header.bg_image.url')) {
+      background: url(hexo-config('header.bg_image.url')) no-repeat center center;
+      background-size: cover;
+    }
+
+    if (hexo-config('header.mask.enable')) {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: $z-index0;
+        width: 100%;
+        height: 100%;
+        background-color: alpha(#000, hexo-config('header.mask.opacity'));
+      }
+    }
   }
 
   if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_height'))) {
@@ -141,35 +161,14 @@
   }
 
   &-info {
-    position: relative;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: $z-index0;
+    padding: 0 .5rem;
     width: 100%;
-    height: 100%;
-
-    if (hexo-config('header.bg_image.enable')) {
-      background: url(hexo-config('header.bg_image.url')) no-repeat center center;
-      background-size: cover;
-    }
-
-    &-inner {
-      position: absolute;
-      top: 50%;
-      right: 0;
-      left: 0;
-      padding: 0 .5rem;
-      text-align: center;
-      transform: translateY(-50%);
-    }
-
-    if (hexo-config('header.mask.enable')) {
-      &-mask {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: alpha(#000, hexo-config('header.mask.opacity'));
-      }
-    }
+    text-align: center;
+    transform: translateY(-50%);
 
     &-title {
       margin-bottom: .5rem;