javascript 为什么零平移变换会影响克隆节点中背景图像的位置？

k2arahey 于 2023-01-24 发布在 Java

关注(0)|答案(1)|浏览(107)

在下面的代码中，创建了#outerDiv的深度克隆。在将克隆添加到DOM之后，零翻译transform被应用到克隆。现在，即使CSS属性background-attachment被设置为fixed，克隆中background-image在#secondInnerDiv中的位置也会发生变化。为什么会发生这种情况，更重要的是，我如何防止这种情况发生？

function createClone() {
  const clonedDiv = document.querySelector("#outerDiv").cloneNode(true);
  document.body.appendChild(clonedDiv);
  clonedDiv.style.setProperty("transform", "translate(0, 0)");
  console.log("Cloned and appended");
}

#outerDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 40vw;
  height: 60vh;
  background-color: red;
  background-image: url("https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png");
  background-size: 80vw;
  background-attachment: fixed;
}

#firstInnerDiv {
  position: absolute;
  width: 20vw;
  height: 40vh;
  bottom: 10vh;
  right: 0;
  background-color: green;
}

#secondInnerDiv {
  position: absolute;
  width: 10vw;
  height: 40vh;
  bottom: 10vh;
  right: 5vw;
  background-color: blue;
  background-image: url("https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png");
  background-size: 80vw;
  background-attachment: fixed;
}

<div id="outerDiv">
  <input type="button" value="Clone" onclick="createClone()" />
  <div id="firstInnerDiv">
  </div>
  <div id="secondInnerDiv">
  </div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/75205354/why-does-a-zero-translate-transform-affect-the-position-of-a-background-image-in

1条答案

按热度按时间

s3fp2yjn1#

此问题是由于transform属性不可继承这一事实造成的。应用transform时：translate（0，0）到克隆的#outerDiv，则会影响其子元素的布局，包括具有背景图像的#secondInnerDiv。
transform属性通过调整元素的位置、大小和旋转来更改元素的布局。在本例中，translate（0，0）将元素在x轴和y轴上移动零像素。但是，由于translate为零，因此不会影响元素的布局，但会影响内部元素的布局。
若要防止发生这种情况，可以从克隆的#outerDiv中删除transform属性，也可以将transform属性应用于没有任何背景图像的父容器。

#parentContainer{
  transform: translate(0, 0);
}

#outerDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 40vw;
  height: 20vh;
  background-color: red;
  background-image: url("https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png");
  background-size: 80vw;
  background-attachment: fixed;
}

#firstInnerDiv {
  position: absolute;
  width: 20vw;
  height: 10vh;
  bottom: 5vh;
  right: 0;
  background-color: green;
}

#secondInnerDiv {
  position: absolute;
  width: 10vw;
  height: 10vh;
  bottom: 5vh;
  right: 5vw;
  background-color: blue;
  background-image: url("https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png");
  background-size: 80vw;
  background-attachment: fixed;
}

<div id="parentContainer">
  <div id="outerDiv">
    <input type="button" value="Clone" onclick="createClone()" />
    <div id="firstInnerDiv">
    </div>
    <div id="secondInnerDiv">
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 为什么零平移变换会影响克隆节点中背景图像的位置？

1条答案

相关问题

热门标签

最新问答