html - position:relative破背景剪辑:文本

我在具有某些子background-clip: text元素的元素上使用<p>。我想将某些:after元素添加到<p>标记和位置，然后绝对是为了掩盖文本并制作一些动画，但是当我在position: relative标记上设置<p>时，它们消失了。我猜想它与background-clip和color: transparent的组合有关。就像它删除了使用background-clip的功能一样。有没有办法让这个工作？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
body {
  flex-direction: column;
}
.container {
  background: linear-gradient(to bottom, white, black);
  background-clip: text;
  -webkit-background-clip: text;
  text-align: center;
}

.container p {
  font-size: 5em;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.container.relative p {
  position: relative;
}

/* .container.relative p:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: black;
} */

<p>The text below is relative, and appears invisible</p>
<div class="container relative">
  <p>Some Relative</p>
  <p>Text</p>
</div>

<p>The text below is <strong>not</strong> relative and is visible</p>
<div class="container">
  <p>Some</p>
  <p>Text</p>
</div>

https://jsfiddle.net/Rissk13/pa1v6gdr/1/

最佳答案

这是一个不需要使用position:relative的梯度更大的想法。

悬停以查看效果：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
body {
  flex-direction: column;
}
.container {
  background: linear-gradient(to bottom, white, black);
  background-clip: text;
  -webkit-background-clip: text;
  text-align: center;
}

.container p {
  font-size: 5em;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.container p {
  background:linear-gradient(#000,#000);
  background-repeat:no-repeat;
  background-size:0% 100%;
  background-position:left;
  transition:1s;
}
.container p:hover {
  background-size:100% 100%;

}

<p>The text below is <strong>not</strong> relative and is visible</p>
<div class="container">
  <p>Some</p>
  <p>Text</p>
</div>

关于html - position:relative破背景剪辑:文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55856550/