如何在background-clip: text；effect中包含文本装饰？
如何在background-clip: text；effect中包含文本装饰？
提问于 2012-02-04 00:17:09
我在一个锚标签上使用了-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属性的完整文档时遇到了很多麻烦。有没有人知道我可以做些什么来让文本下划线出现在我的锚点标签上？
回答 4
Stack Overflow用户
发布于 2012-03-14 08:29:41
您可以将-webkit-text-fill-color更改为RGBA值，如下所示；-webkit-text-fill-color: rgba(0,0,0,0.3);这将允许显示下划线。只需使用不透明度和rgb值来匹配您的背景颜色等。
Stack Overflow用户
发布于 2016-05-06 17:11:25
我已经在Chrome50.0和Firefox Nightery49.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。
Stack Overflow用户
发布于 2012-02-04 01:18:41
你实际上得到了下划线，但它也有一个透明的颜色:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9131807
复制相关文章
相似问题
腾讯云开发者
