代码之家 › 专栏 › 技术社区 › godblessstrawberry

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

css-variables css

0

godblessstrawberry · 技术社区 · 7 年前

我试图通过css变量实现css视差效果 scroll-out 剧本基本上脚本是做什么的-它设置 --viewport-y css变量,我希望在计算时依赖它 top 图像的值。问题是 --视口-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>

2 回复 | 直到 7 年前

1

2

Dániel Kis-Nagy 7 年前

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>

2

str 7 年前

使用十进制值 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(100% - 10px)