Question

我有几个李的ul。

我在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/

亲切的问候，

Answer 1

我有同样的问题。事实证明这是由于显示属性。无论出于何种原因，Safari需要将显示设置为“内联”或“内联块”，而不是“内联 - 灵活”。

所以对我来说这意味着改变来自：显示：flex; 至： display：inline;

Answer 2

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

看看这个小提琴： 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中，这样您就可以将叠加层放在列表的底部。

Answer 3

如果您的元素上仅包含ascii代码，则可能需要一个全角字符。

like：I need show transparent text color + ' '

-webkit-text-fill-color：transparent;不适用于Safari 7.1.7

3 个答案: