移動設備上消失的文本漸變疊加-有解無憂

在我的 iPhone 上查看時，我的部分漸變文本消失了。我遇到了這個問題，我的網頁在每個瀏覽器上看起來都很完美，甚至使用瀏覽器檢查工具在移動視圖上看起來都很完美，但是當我部署它并在我的實際手機上查看它時，文本“工程師”從頁面上消失了，我不知道如何理解這個錯誤。

我鏈接了兩張照片，一張顯示頁面在我的移動設備上的樣子，另一張顯示它應該是什么樣子。我怎樣才能在未來避免這樣的事情并理解它為什么會發生？

.gradient-text {
        background-image: linear-gradient(135deg, #019df7, #00c9a0);
        background-size: 100%;
        background-repeat: repeat;
        background-clip: text;
        
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent; 
        -moz-text-fill-color: transparent;
    }

<h1 class="title">I'm ____,<br class="break"> a <span class="engineer gradient-text">Software Engineer</span>.</h1>

iPhone 上的示例圖片，其中“工程師”文本不可見

它應該看起來如何的圖片

謝謝，非常感謝任何支持。這是一個非常煩人的錯誤，很難理解。

uj5u.com熱心網友回復：

此解決方案有效：https ://stackoverflow.com/a/65330979/18450672

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

通過將其應用于漸變疊加的 css 規則，它以某種方式起作用。

uj5u.com熱心網友回復：

試試0度

.gradient-text {
  background-image: linear-gradient(0deg, #019df7, #00c9a0);
  
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  
  background-repeat: repeat;
  
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

<h1 class="title">I'm ____,<br class="break"> a <span class="engineer gradient-text">Software Engineer</span>.</h1>

uj5u.com熱心網友回復：

   .gradient-text {
      background-image: linear-gradient(0deg, #019df7, #00c9a0);
      
      -webkit-background-size: 100%;
      -moz-background-size: 100%;
      -o-background-size: 100%;
      background-size: 100%;
      
      background-repeat: repeat;
      
      -webkit-background-clip: text;
      -moz-background-clip: text;
      background-clip: text;
      
      -webkit-text-fill-color: transparent;
      -moz-text-fill-color: transparent;

      box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <h1 class="title"><br class="break"> a <span class="engineer gradient-text">Software Engineer</span>.</h1>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442473.html

標籤：html css 响应式设计

上一篇：使游標跳過禁用文本表單

下一篇：將css與html一起使用時如何洗掉重復的字母？