如何在背景剪辑中包含文本装饰：文本；影响？

Question

我在锚标记上使用 -webkit-background-clip: text,border 和 color:透明 ，下划线似乎永远不可见。

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

这是我的 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

我已经在 Chrome 50.0 和 Firefox Nightly 49.0a1 上对此进行了测试（它还支持 -webkit-background-clip: text 自版本 48.0)

据我所知，根据 WebKit 文档，无法在其中包含文本装饰或文本阴影剪报。

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

Answer 3

你实际上得到了下划线，但它也有透明的颜色:)

Answer 4

我认为您不能使用 background-clip: text; 显示 text-decoration，但您可以使用一些 css 创建下划线>。

/* UNNECESSARY CSS */

body {
  font-size: 1.2rem;
  font-family: sans-serif;
  font-weight: bold;
}

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* NECESSARY CSS */
.link {
  position: relative;
  color: black;
  cursor: pointer;
  display: inline;
  pointer-events: all;
  background: linear-gradient(to right, green, green 50%, #43b843ff 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 150ms ease;
}
.link:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  outline: 0px solid transparent;
  transition: width 150ms ease;
}
.link:hover {
  background-position: 0 100%;
  color: green;
}
.link:hover:after {
  outline: 1px solid green;
  width: 100%;
}

<div class="wrapper">
  <a class="link">Link</a>
</div>

Answer 5

安德鲁，

如果使用颜色：透明，则看不到下划线。尝试下面的代码，您将在悬停时看到下划线。

    .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;}`