0

.Piper{
   background-image: url(https://i.pinimg.com/originals/e9/2f/03/e92f03ace41d591e3c3f7454105dcffb.jpg);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  font-family: Junegull;
  font-size: 100px;
  text-align: center;
  position: relative;
    
}
  <div class="Piper">
   Картинка внутри текста 
  </div>

Нужно сделать,чтобы при прокрутки страницы вниз или вверх картинка внутри предложения "двигалась" но текст оставался на месте, как тут https://www.styleshout.com/templates/preview/Ceevee10/ перед формой регистрации, где сайт скроллится,но картинка остается на месте.

1 ответ 1

0

div {
  background-image: url(https://i.pinimg.com/originals/e9/2f/03/e92f03ace41d591e3c3f7454105dcffb.jpg);
  background-attachment: fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 100px;
  font-weight: bold;
  text-align: center;
}

section {
  height: 300px;
}
<section></section>
<div>
  Картинка внутри текста
</div>
<section></section>

2
  • Да,это то что нужно,спасибо вам,а не подскажите,возможно ли при таком эффекте сделать текст 3D с помощью text-shadow или чего то подобного?
    – user362586
    Commented 5 дек. 2019 в 21:46
  • filter: drop-shadow(val val val color) диву, если это ты об этом эффекте
    – user355286
    Commented 5 дек. 2019 в 22:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.