-webkit-text-fill-color：透明；在 Safari 7.1.7 中不起作用答案

【问题标题】：-webkit-text-fill-color: transparent; not working in Safari 7.1.7-webkit-text-fill-color：透明；在 Safari 7.1.7 中不起作用
【发布时间】：2015-07-08 10:09:14
【问题描述】：

我有一个 ul 有几个 li。

我在 ul 上使用这个 id。

#list {
margin-right: auto;
margin-left: auto;
width:500px;
color:black;
background: -webkit-linear-gradient(#000, #909090);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

ul 的内容在 Chrome 中得到了渐变处理，但在 Safari 中没有。在 Safari 中，所有的 li 都是“不可见的”。如果我检查然后禁用“-webkit-text-fill-color: transparent;”，文本将变得可见，尽管没有渐变（显然）。

想法？

这里是 JSfiddle：https://jsfiddle.net/s96bzcua/

亲切的问候，

【问题讨论】：

官方 safari bug tracker 中有一个 bug。不幸的是，过去两年似乎没有人研究过它：bugs.webkit.org/show_bug.cgi?id=169125

标签： css google-chrome safari webkit

【解决方案1】：

我也有同样的问题。原来这是由于显示属性。无论出于何种原因，Safari 都需要将显示设置为“inline”或“inline-block”，而不是“inline-flex”。

所以对我来说，这意味着从：显示：弯曲；到：显示：内联；

【讨论】：

我不得不使用 inline-block，但这很棒。谢谢！我的现场示例is here 如果其他人想看到它的实际效果。如果没有 a 标签上的“inline-block”声明，Safari 只会显示第一行左右，然后文本就丢失了。
知道为什么这与 flexbox 不兼容吗？

【解决方案2】：

对于来这里的人，只需删除-webkit-text-fill-color: transparent;，因为它是not a standard and is not on a standard track。

改用color: transparent 并将所有内容包装在@supports 中，以防止在不支持background-clip: text 的情况下使用颜色透明。

这是一个例子：https://jsfiddle.net/0oeftdbk/5/

--

根据 Safari 上渐变文本的 ? 错误，如果它应用于父元素而不是直接应用于子元素，则所有子元素都需要为 display: inline 或固有内联元素，例如span。

【讨论】：

【解决方案3】：

您可以使用带有渐变背景的叠加层，禁用与叠加层的交互并将其放置在列表底部。

看看这个小提琴： https://jsfiddle.net/s96bzcua/1/

#overlay {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 99%, rgba(255, 255, 255, 1) 100%);
    width: 100%;
    pointer-events: none;
    height: 50%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 99;
}

使用

pointer-events: none;

禁用与叠加层的所有交互并将所有内容包装在具有相对定位的 div 中，以便您可以将叠加层放置在列表的底部。

【讨论】：

谢谢。我会试一试。我想你粘贴了我的小提琴 URL，所以如果你有另一个例子会很有帮助。
@PeterN 哦，是的，你是对的。 jsfiddle.net/s96bzcua/1我更新了帖子。
你的例子很有道理。谢谢！

【解决方案4】：

这听起来可能很奇怪，但是：

将transparent 替换为rgba (0,0,0,0.0001)

它不适用于rgba (0,0,0,0)

【讨论】：

【解决方案5】：

如果您的 Element 上只有 ascii 代码，也许您需要一个全角字符。

点赞：I need show transparent text color + ' '

【讨论】：