Safari不会呈现CSS渐变文字 [英] Safari doesn't render css gradient text

问题描述

我正在尝试使用以下CSS代码在Webkit浏览器中制作渐变文本:

I'm trying to make gradient text in webkit browsers using this CSS code:

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

}

它可以在Chrome中完美运行，但是在Safari(8和9)中，除非您通过鼠标单击并在其上拖动来选择渐变文本，否则它不会呈现渐变文本.

it works perfectly in Chrome, but in Safari (both 8 and 9) it doesn't render gradient text unless you select it via mouse click+drag over it.

HTML如下:

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

在此花费了2个晚上.找到了很多建议使用此方法，以及与我的问题类似且完全没有解决方案的问题.如果有人愿意，将不胜感激.

Spent 2 evening on that. Found a lot of recommendations to use this method with couple issues similar to mine and no solutions at all. Would appreciate a lot if someone would help.

重要更新:

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

I've found out, that this code works great when applied to single <p> element, but fails to render in Safari (not in chrome) when applied to div wrapper to single or multiple <p> elements like this:

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

有人在想为什么会是这种情况或如何克服这种情况?

Any thoughts why this could be the case or how to overcome this?

推荐答案

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

I found a simple fix for this

.text, span {
 display: block;
}

这篇关于Safari不会呈现CSS渐变文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！