CSS calc()将小数转换为像素

Question

我试图通过css实现视差效应，通过滚出脚本获取的css变量。基本上，脚本所做的-它设置了--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>

​

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>

​

它这样工作的原因是，您可以在calc中混合不同的单元。例如，calc(100% - 10px)。