Question

我试图用编号的碎片从背景图像中制作拼图。这些作品最终将通过javascript移动。现在，我只是试图定位这张图片。 html有一个名为puzzlearea的id的div，我用javascript附加了孩子，我知道这有效，因为它显示了新的div片段及其数字。 CSS拒绝相对于此背景移动棋子，我的两个测试棋子卡在左上角，似乎忽略了我的背景位置值。这是CSS：

body {
   text-align: center;
   font-family: cursive;
   font-size: 14pt;
}

#puzzlearea {
   width: 400px;
   height: 400px;
   margin: auto;
   position: relative;
   background-image: url("planck-image.png");
}

.tile {
   font-size: 40pt;
   color: red;
   line-height: 70pt;
   width: 90px;
   height: 90px;
   border: 5px solid black;
   background-position: -200px -200px;
   position: fixed;
}

更新：Screenshot.

您对定位没有发生的原因有什么看法吗？

Answer 1

position: absolute上需要.tile才能使用顶部/底部/左/右参数放置它们（您也需要这些参数）。

fixed position指的是视口，而不是父元素。

调整图像片段的背景位置

1 个答案: