Question

所以我一直在想我会把我的背景图像移动一下。非常花哨，而且比较容易做到。问题是我的背景图像目前设置为覆盖。（背景尺寸：盖;）

我可以按如下方式获取css设置：

var pageElement = document.getElementById("page");
var curLeft = pageElement.style.left;
var newLeft = posIndex[current] * 10 ;

在这种情况下，我只得到左边的CSS设置，但有没有办法弄清楚已经做了什么封面。基本上，我想知道它是否使图像调整器和更宽的20％或类似的东西，所以我知道我可以滑动图像的宽度。

我想在理论上我可以用代码做出有根据的猜测。或者可能只是将它们全部忽略，仅根据宽度移动图像，希望渲染处理其余部分。

Answer 1

如果我理解正确，您可以根据＆＃34;封面＆＃34;的已知行为来判断图像尺寸的变化程度。只要您知道原始图像大小，就可以使用背景元素：

//Original size
var size={w:120, h:120};

//Check the difference between the element dimensions and the original size
var diff={w:el.offsetWidth/size.w, h:el.offsetHeight/size.h}

//Whichever one is higher is your new image ratio
if(diff.w > diff.h) var ratio = diff.w*100;
var ratio = diff.h*100;

Answer 2

希望这有帮助。

您可以通过将背景大小设置为高于100％的百分比来使其更大。

您可以将位置值从0（左/上边缘）移动到100％（右/下边缘）。

＆＃13;

@keyframes example {
  0% {
    background-position: 50% 50%;
  }
  20% {
    background-position: 0% 20%;
  }
  40% {
    background-position: 30% 100%;
  }
  60% {
    background-position: 100% 10%;
  }
  100% {
    background-position: 50% 50%;
  }
}
.img {
  width: 300px;
  height: 200px;
  animation: example 5s infinite;
  background: url(https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg) no-repeat;
  background-size: 120%;
  background-position: 30% 20%;
}

＆＃13;

<div class="img">
  <div>

＆＃13;

你能得到＆＃34;州＆＃34;封面使用元素

2 个答案: