CSS-背景位置，背景剪辑文本使用CSS变量作为百分比

Question

我正在尝试在文本上剪裁一个线性渐变，并用css变量设置背景位置。它不适用于百分比，但前提是我设置了一个px值。

正如您所看到的，如果您试图更改%中的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

感谢

Answer 1

试试看：

: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);
}