用於彩色 header 的具有線性漸變的背景圖像在移動瀏覽器上不起作用

Question

我正在嘗試制作彩色 header 並且它不適用於移動瀏覽器（標題不可見）。 有人知道為什么會這樣嗎？ 非常感謝。

也許應該是因為我那里有其他代碼。

來自 Next.Js 的 HTML

<div className={indexStyles.sliderWrapper}>

              <div className="container">
                  <div className={indexStyles.sliderText}>
                      <h1>Autoslavkov</h1>
                      <ul>
                          <li>Autočalounictví</li>
                          <li>Autorizovaný chiptuning</li>
                          <li>Auto klimatizace</li>
                          <li>Renovace světel</li>
                      </ul>
                  </div>

              </div>

              <Image
                  src="/images/slid1.jpg"
                  alt=""
                  layout="fill"
                  objectFit="cover"
              />

          </div>

和 CSS

.sliderWrapper{
    width: 100%;
    position: relative;
    min-height: calc(100vh - var(--header-height) - var(--navInfo-height));
    background-color: black;
    overflow: hidden;
}

.sliderWrapper::after{
    content: "";
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.35);
}

.sliderText{
    position: relative;
    z-index: 1;
    margin: 65px 0 50px;
    font-family: 'Open Sans Bold', sans-serif;
}

.sliderText h1{
     --hColor1: #bf1717;
     --hColor2: #E73636;
     background-image: -webkit-linear-gradient(to top, var(--hColor1), var(--hColor2) 50%, var(--hColor1));
     background-image: linear-gradient(to top, var(--hColor1), var(--hColor2) 50%, var(--hColor1));
     font-size: 30pt;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     -webkit-background-clip: text;
     text-align: center;
     padding: 5px;
 }

.sliderText h1::after{
    content: "";
    display: block;
    height: 3px;
    width: 80px;
    margin: 0 auto;
    background-color: var(--hColor1);
}

這是它在電腦上的樣子：

這里是它在移動設備上的樣子：

Answer 1

所以我發現h1::after屬性正在這樣做，但我不知道為什么。 我將其更改為position:absolute然后居中使用left:50%; 和transform: translateX(-50%); 現在它工作正常。