时间戳

首页 > 解决方案 > 如何在javascript中为背景位置创建变量？

javascript - 如何在javascript中为背景位置创建变量？

问题描述

我正在尝试在 Javascript/CSS 中为我​​的背景位置创建一个变量。我对编程很陌生，我的一位开发人员朋友编写了原始代码，我无法将我的背景位置分配给一个变量。

<style>
.frame{
  width: 354.1875px;
  var viewWidth = 354.1875px;
  height: 415px;
  background-image: url(https://website.com/image.jpg);
  background-repeat: no-repeat;
  background-position: 0 50%;
}
.frame1 {
  background-position: -1*viewWidth 50%;
}
.frame2 {
  background-position: -2*viewWidth 50%;
} 
.frame3 {
  background-position: -600px 50%;
}

第 1 帧和第 2 帧是我尝试使用变量的地方，从我用谷歌搜索的结果来看，它应该可以工作，有人可以帮我吗？

标签： javascriptjquerycss

解决方案

您可能正在考虑可以通过以下方式使用的CSS 自定义属性。

自定义属性（有时称为 CSS 变量或级联变量）是 CSS 作者定义的实体，其中包含要在整个文档中重用的特定值。

:root {
  --viewWidth: 354.1875px;
}

.frame{
  width: var(--viewWidth);
  height: 415px;
  background-image: url(https://website.com/image.jpg);
  background-repeat: no-repeat;
  background-position: 0 50%;
}
.frame1 {
  background-position: calc(-1 * var(--viewWidth)) 50%;
}
.frame2 {
  background-position: calc(-2 * var(--viewWidth)) 50%;
} 
.frame3 {
  background-position: -600px 50%;
}

推荐阅读