положение: относительное нарушение фона-клип: текст - PullRequest
Новая
       19

положение: относительное нарушение фона-клип: текст

1 голос
/ 25 апреля 2019

Я использую 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/

1 Ответ

1 голос
/ 25 апреля 2019

Вот идея с большим градиентом, где вам не нужно 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>
...