CSS - положение фона с текстом фонового клипа с использованием переменных css в процентах

Я пытаюсь обрезать линейный градиент на тексте и установить положение фона с помощью переменной css. Это не работает с процентами, но только если я установил значение в пикселях.

как видите, если вы попытаетесь изменить значение px в%, это не сработает.

:root{
  --percent : 50px;
}

body{
  background-color: #aeaeae;
}

.hello{
  font-size: 10rem;
  background: linear-gradient(
    #aaeeff, #ddddff
  ) no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position-y: 70px;
}
<div class="hello">HELLO</div>

я хочу сделать это без js

Благодарность


css css-variables
person Martino    schedule 31.05.2021    source источник
comment
Это не имеет ничего общего с использованием переменных CSS напрямую, а связано с процентами для background-position. Они основаны на реальных размерах изображения, которых у вас здесь нет, потому что у вас вообще нет изображения. Мне тоже не повезло с попыткой указать здесь размер фона.   -  person CBroe    schedule 31.05.2021

Ответы (1)


arrow_upward
0
arrow_downward

Попробуй:

:root {
--percent : calc(10rem/2);
}

body{
  background-color: #aeaeae;
}

.hello{
  font-size: 10rem;
  background: linear-gradient(
    #aaeeff, #ddddff
  ) no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position-y: var(--percent);
}
person HoangAnh23    schedule 01.06.2021
comment
Отлично! но для этого вам нужно знать. размер шрифта. Если вы представляете, что переменная --percent вычисляется с помощью javascript. вам нужно каким-то образом получить размер шрифта. или жестко закодируйте его. (не так элегантно) - person Martino; 01.06.2021