时间戳

首页 > 解决方案 > 带有背景 GIF 的透明文本在 Chrome 移动版 79.0.3945.73 React 上不起作用

css - 带有背景 GIF 的透明文本在 Chrome 移动版 79.0.3945.73 React 上不起作用

问题描述

我有一个带有背景 gif 的透明文本。它适用于桌面 chrome 和 safari。适用于 safari mobile，但标题未在 chrome mobile 上显示。链接出现，但标题没有。在桌面和 Safari Mobile 上显示标题。

const Menu = () => {
  return (
    <section className="menu">
      <h1 id="menuTitle">The Pinellas Ale Trail</h1>
      <section className="menuLinks">
        <nav>
          <ul>
            <li>
              <Link to="/">Home Page</Link>
            </li>
            <li>
              <Link to="/BreweryMap">Brewery Map</Link>
            </li>
            <li>
              <Link to="/AdminPage">Add info</Link>
            </li>
          </ul>
        </nav>
      </section>
    </section>
  )
}

.menu {
    margin: auto;
    background-image: url(../src/Images/Mandolorian.gif);
    /* color: transparent; */
    background-clip: text;
    -webkit-background-clip: text;
    text-align: center;
    background-position: center;
    width: 100%;
    margin-top: 0.5rem;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#menuTitle {
    text-align: center;
    margin: 0;
    font-family: 'Milonga', cursive;
    color: rgba(255, 255, 255, 0);
}

标签： cssreactjs

解决方案

我从https://caniuse.com/#feat=background-img-opts找到了以下信息

已知的问题：

iOS Safari 在 background-size: cover; 上有错误行为。+ 背景附件：固定；iOS Safari 在 background-size: cover; 上有错误行为。在页面的正文上。

推荐阅读