CSS calc () конвертирует десятичные дроби в пиксели

Question

Я пытаюсь добиться эффекта параллакса css с помощью css-переменных, выделенных скриптом scroll-out .В основном то, что делает скрипт - он устанавливает переменную --viewport-y css, которую я хочу использовать при расчете значения top для изображения.Проблема в том, что --viewport-y значения являются десятичными - например, 0.861, 0.034 и т. Д.

Как получить значение пикселей из этих значений?

Я создал фрагмент, чтобы продемонстрировать проблему, в которой ялегко изменяет непрозрачность, но не может установить left свойство

body {
  --test: 0.5;
}

.container {
  background: yellow;
  width: 100px;
  height: 100px;
  margin: 30px;
  position: absolute;
  opacity: calc( var(--test));
  left: calc( 100 * var(--test))px;
}

<div class="container"></div>

Answer 1

Использование десятичных значений для px прекрасно. Но то, как вы используете calc с юнитами, неверно. Вы должны сделать это следующим образом:

body {
  --test: 0.5;
}

.container {
  background: yellow;
  width: 100px;
  height: 100px;
  margin: 30px;
  position: absolute;
  opacity: calc(var(--test));
  left: calc(100px * var(--test));
}

<div class="container"></div>

Причина, по которой это работает так, заключается в том, что вы можете смешивать различные единицы в calc. Например calc(100% - 10px).

Answer 2

Перемещение px в выражении calc, например:

body {
  --test: 0.5;
}

.container {
  background: yellow;
  width: 100px;
  height: 100px;
  margin: 30px;
  position: absolute;
  opacity: calc( var(--test));
  left: calc( 100px * var(--test));
}

<div class="container"></div>