Question

我在具有某些子background-clip: text元素的元素上使用<p>。我想向:after标签和位置添加一些<p>元素，然后绝对是为了掩盖文本并制作一些动画，但是当我在{{1}上设置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;
} */

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>

位置：相对破背景剪辑：文本

1 个答案: