Question

我在锚标记上使用-webkit-background-clip: text,border和color: transparent，似乎下划线永远不会显示。

我想要的是在背景剪辑中包含文本修饰。

这是我的CSS：

.background-clip {
  background: url(images/index-background.jpg) repeat top center fixed;
  -webkit-background-clip: text,border;
  color: transparent;
}

.background-clip a {
  color: transparent;
}

.background-clip a:hover {
  text-decoration: underline;
  -webkit-text-decorations-in-effect: underline; /* doesn't seem to do anything, I am having trouble finding definitive documentation on this */
}

相关的HTML：

<div class="background-clip"><a href="#">Imagine a lot of text here</a></div>

我在查找WebKit CSS属性的详细文档时遇到了很多麻烦。有没有人知道我可以做些什么来使文字下划线出现在我的锚标记的悬停上？

Answer 1

您可以将-webkit-text-fill-color更改为RGBA值，如下所示; -webkit-text-fill-color: rgba(0,0,0,0.3);这允许显示下划线。只需使用不透明度和rgb值来匹配背景颜色等。

Answer 2

你实际上得到了下划线，但它也有透明色：）

Answer 3

我已经在Chrome 50.0和Firefox Nightly 49.0a1（也支持-webkit-background-clip: text since version 48.0）

上对此进行了测试

据我所见，against the WebKit documentation无法在裁剪中包含文字装饰或文字阴影。

根据Chromium bug -webkit-text-decorations-in-effect目标来纠正与标准text-decoration属性相关的继承问题，但它显然不会以任何方式影响-webkit-background-clip: text。

Answer 4

安德鲁，

如果使用颜色，则无法看到下划线：透明。尝试下面的代码，你会看到悬停下划线。

    .background-clip {
     background:url(images/index-background.jpg) repeat top center fixed;
    -webkit-background-clip: text,border;
     color: transparent;}

    .background-clip a {
     color:red;
    text-decoration:none;}

    .background-clip a:hover {
    text-decoration:underline;
    -webkit-text-decorations-in-effect: underline;}`

如何在background-clip：text中包含文本修饰;影响？

4 个答案: