如何在background-clip中包含文本装饰：text;影响？ [英] How to include text decoration in background-clip: text; effect?

问题描述

我在锚标签上使用 -webkit-background-clip：text，border 和 color：transparent

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

What I want is to include the text decoration in the background clipping.

这是我的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属性的详细文档。

I am having a lot of trouble finding thorough documentation of the WebKit CSS properties. Does anyone know what I can do to make the text underline appear on hover of my anchor tag?

推荐答案

你可以改变你的 - webkit-text-fill-color转换为RGBA值，像这样; -webkit-text-fill-color：rgba（0,0,0,0.3）; 这允许显示下划线。只是玩不透明度和rgb值匹配您的背景的颜色等。

You can change your -webkit-text-fill-color to a RGBA value, like so; -webkit-text-fill-color: rgba(0,0,0,0.3); This allows the underline to display. Just play around with the opacity and rgb values to match the colour of your background etc.

这篇关于如何在background-clip中包含文本装饰：text;影响？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！