css - 如何在背景剪辑中包含文本装饰 : text; effect?

Question

我在 anchor 标签上使用了 -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 属性的详尽文档。有谁知道我可以做些什么来使文本下划线出现在我的 anchor 标签悬停时？

Answer 1

您可以将您的 -webkit-text-fill-color 更改为 RGBA 值，就像这样； -webkit-text-fill-color: rgba(0,0,0,0.3); 这允许显示下划线。只需调整不透明度和 rgb 值以匹配背景颜色等。