html - 带有彩色标题的线性渐变的背景图像在移动浏览器上不起作用

Question

我正在尝试制作彩色标题，但它不适用于移动浏览器（标题不可见）。有人知道为什么会这样吗？非常感谢。

也许应该是因为我那里有其他代码。

来自 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);
}

这是它在电脑上的样子：

这里是它在移动设备上的样子：

标签： htmlcssbackground-imagelinear-gradients

Answer 1

所以我发现该h1::after物业正在这样做，但我不知道为什么。我将其更改为position:absolute然后将其居中使用left:50%;，transform: translateX(-50%);现在它工作正常。