Question

我刚刚意识到，在Chrome 69中，-webkit-background-clip: text;的行为已更改。现在，它具有与Edge相同的bug。将内容包装在段落中时，文本是不可见的。

我想要实现的是我在背景中具有渐变色，并具有透明的文本颜色，以便渐变的颜色能够通过。它可以在Firefox中使用，并且曾经在Chrome中使用，但是现在在版本69中，它不再起作用。

以下是一个可尝试的代码笔：https://codepen.io/obs/pen/eLPeYz 删除p标签时，它会按预期工作。

这是Chrome中的错误吗？我该如何解决？

Answer 1

是的，这似乎是Chrome中的错误。其他人也报告了它：Chrome 69 when using 'transform', '-webkit-background-clip: text' and 'color:transparent' don't work

此外，优良作法是将-webkit-background-clip: text;放在包含文本的元素上，而不是其父元素上。

Answer 2

我了解到，当您嵌套内联元素时，该错误不会发生。因此，将 obs 代码笔调整为使用span标签而不是p标签，即可进行裁剪。

Answer 3

我来这里是为了查看是否有人遇到问题webkit-background-clip: text;。我注意到使文本渐变在按钮内的文本上起作用的代码，但是当我将相同的代码应用于h1文本时，该代码不起作用。经过一些实验，我发现在背景线性渐变之前添加width对我来说解决了这个问题。

我知道这些答案已经有几年历史了，但是如果像我这样的人再次出现在这里，以下内容对我有用：

<style>
     h1 { text-align:center; font-family: 'Italiana', serif; 
     font-size: 2em; width:50%; background: linear-gradient( 
     to right, rgba(206, 189, 167, .55), rgba(247, 241, 226, 
     1), rgba(206, 189, 167, .55)); 
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent; 
     background-clip: text; padding: 1em 0 1em 0; }
</style>

在以下位置查看我的渐变文字：https://palmbeachcuisine.com/#BreakfastandBrunch

Answer 4

background: linear-gradient(#131c27, #663b34);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

这适用于Chrome。只需设置您的渐变，然后使用CSS中的其余代码即可。

-webkit-background-clip：文本在Chrome 69中不再起作用

4 个答案: