position:relative 打破背景剪辑：文字

Question

我在一个包含一些子 <p> 元素的元素上使用 background-clip: text。我想向 <p> 标签和位置添加一些 :after 元素，然后绝对是为了掩盖文本并做一些动画，但是当我在 [=14= 上设置 position: relative 时] 标签，它们就会消失。我猜它与 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/

Answer 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>

position:relative 打破背景剪辑：文字

position:relative breaking background-clip: text

html

css

background

linear-gradients