feat: add filters to the cover image (#89)

#### What type of PR is this?
/kind feature

#### What this PR does / why we need it:
为封面图增加一个暗色调滤镜，解决在亮色调背景图的情况下标题无法看清的问题。

#### Which issue(s) this PR fixes:
Fixes #86 

#### Does this PR introduce a user-facing change?

```release-note
为封面图增加暗色调滤镜
```

templates/modules/hero.html

@@ -37,13 +37,17 @@
       </th:block>
     </th:block>
   </div>
-  <div
-    th:if="${theme.config.layout.content_header} and ${not #strings.isEmpty(cover)}"
-    class="h-96 bg-cover bg-center bg-no-repeat"
-    th:style="'background-image: url('+${cover}+')'"
-  >
-    <div class="container mx-auto flex h-full flex-col items-center justify-center gap-3 py-6">
-      <span class="text-5xl text-white" th:text="${title}"></span>
+  <th:block th:if="${theme.config.layout.content_header} and ${not #strings.isEmpty(cover)}">
+    <div class="relative">
+      <div
+        class="before:z-1 relative h-96 bg-cover bg-center bg-no-repeat before:absolute before:inset-0 before:bg-black/40 before:content-['*']"
+        th:style="'background-image: url('+${cover}+')'"
+      ></div>
+      <header
+        class="pattern-header-text absolute top-1/2 mx-auto flex w-full flex-col items-center justify-center gap-3"
+      >
+        <h1 class="text-5xl text-white" th:text="${title}"></h1>
+      </header>
     </div>
-  </div>
+  </th:block>
 </section>