Safari 不呈现 CSS 渐变文本答案

【问题标题】：Safari doesn't render css gradient textSafari 不呈现 CSS 渐变文本
【发布时间】：2015-11-12 02:25:54
【问题描述】：

我正在尝试使用此 CSS 代码在 webkit 浏览器中制作渐变文本：

.text {
    background: -webkit-linear-gradient(blue, green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

它在 Chrome 中完美运行，但在 Safari（8 和 9）中它不会呈现渐变文本，除非您通过鼠标单击并拖动它来选择它。

HTML如下：

<p class = "text">Hello world.</p>

为此花了 2 个晚上。发现了很多使用这种方法的建议，这些方法与我的几个问题相似，但根本没有解决方案。如果有人能提供帮助将不胜感激。

重要更新：

我发现，此代码在应用于单个 <p> 元素时效果很好，但在将 div 包装器应用于单个或多个 <p> 元素时无法在 Safari（而不是 chrome）中呈现，如下所示：

<div class = "text">    
   <p>First line.</p>
   <p>Second, way longeeeeeeer line. </p>
   <p>Third line, just to see gradient span over multiple lines. </p>
</div>

有什么想法为什么会出现这种情况或如何克服这个问题？

【问题讨论】：

可能重复：Why do Safari and Firefox seem to incorrectly render my gradient and how can I fix it?
很遗憾，事实并非如此。
好的。我将在我的 iPad 上进行测试。今天晚些时候回复你（如果其他人没有给你一个好的答案）。
非常感谢。请注意，我添加了重要更新。
所以你是说直接应用于<p> 元素时渐变有效，但应用于<div> 容器时不会级联？

标签： html css safari

【解决方案1】：

我找到了一个简单的解决方法

.text, span {
 display: block;
}

【讨论】：

【解决方案2】：

我知道这是一个老问题，但万一有人仍然需要它：我遇到了同样的问题，对我有用的是向它添加一个文本阴影并使阴影透明。

.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px #00000000; <--
}

请注意，我在 HEXA 代码的末尾添加了“00”，如果有人不知道，这会导致透明度！

【讨论】：

这实际上对我有用。
也为我工作。小记：#00000000等价于transparent。

【解决方案3】：

如果您有两行文本并且在 Safari 中不起作用，请尝试：

-webkit-box-decoration-break: clone;

【讨论】：

这是行之有效的解决方案！这真好。谢谢！

【解决方案4】：

如果您像这样<h1>Discover <span>Something</span></h1> 编码，那么文本渐变将不会出现在 Safari 中，但在 Chrome 和 Firefox 中会正常显示。

如果你喜欢这个没有span 标签的<h1>Discover Something</h1>，那么它确实可以正常工作。我不认为 Safari 喜欢标签内的标签。讨厌的虫子。它适用于 Chrome 和 Safari 等其他浏览器。

【讨论】：

我向 webkit 报告错误报告。希望他们能解决问题。

【解决方案5】：

截至 2018 年 5 月，这仍然是一个 Safari 错误。如果文本先突出显示，然后不突出显示，渐变会正确显示。

我可以使用以下替代方法：

.text {
  -webkit-mask-image: linear-gradient(blue, green);
}

这适用于 Safari 11、iOS Safari 11、Chrome 66 和 Firefox 60。

灵感来自https://stackoverflow.com/a/45136579/9772439

【讨论】：

【解决方案6】：

b 标签也有同样的问题，用属性解决了

display: inline-block;

【讨论】：

【解决方案7】：

我遇到了同样的问题，看起来是 Safari 错误。我注意到只有当您的级联元素是块类型时才会出现此问题。

我的 hack 是这样的

    <div class = "text">    
        <span>First line.</span>
        <p></p>
        <span>Second, way longeeeeeeer line. </span>
        <p></p>
        <span>Third line, just to see gradient span over multiple lines.</span>
        <p></p>
    </div>

我有段落标签的唯一原因是为了间距，因为在跨度上添加显示块会再次触发错误。

【讨论】：

【解决方案8】：

对我来说，最简单的存档方法是将文本绘制为图像，包含阴影...并将其放在背景 css 中。

【讨论】：

图像为矢量化 .svg ？如果只是 .png 或 .jpg，那么它不会像周围的文字那么清晰。
svg 当然，我从没想过 jpg

【解决方案9】：

flex 或inline-flex 是你使用的问题。

block 或 inline-block 正在解决问题

【讨论】：

【解决方案10】：

如果您已尝试上述所有方法，但均未奏效，请检查标签上是否有伪元素。

Safari 不喜欢它们是静态的，因此您需要将它们绝对定位。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案11】：

我有同样的问题，修复它使用属性显示属性“内联”或“内联块”到主元素，在你的情况下是 p.text

【讨论】：