Question

我正在尝试通过scroll-out脚本特权的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)。

CSS calc（）将小数转换为像素

2 个答案: