Question

我尝试使用此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包装器应用于单个或多个{{1时，无法在Safari中呈现（而不是在chrome中）像这样的元素：

<p>

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

Answer 1

截至2018年5月，这仍然是一个Safari bug。如果文本首次突出显示，然后突出显示，则会正确显示渐变。

我能够使用以下替代方案：

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

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

受https://stackoverflow.com/a/45136579/9772439启发

Answer 2

我在使用b标签时遇到了同样的问题，并通过属性

解决了这个问题

display: inline-block;

Answer 3

如果您使用这样的代码<h1>Discover <span>Something</span></h1>，则文本渐变将不会在Safari中显示，但在Chrome和Firefox中会很好地显示。

如果您喜欢这样的<h1>Discover Something</h1>而没有span标记，那么它将正常工作。我不认为Safari喜欢标签内的标签。讨厌的错误。它可以在其他浏览器（例如Chrome和Safari）上运行。

Answer 4

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

.text, span {
 display: block;
}

Answer 5

我遇到了同样的问题，看起来这是一个Safari漏洞。我注意到只有在级联元素是块类型时才会出现问题。

我对此的破解就像这样

    <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>

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

Answer 6

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

Answer 7

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

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

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

Answer 8

flex 或 inline-flex 是您使用时的问题。

block 或 inline-block 正在解决问题

Answer 9

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

-webkit-box-decoration-break: clone;

Safari无法呈现css渐变文字

9 个答案: