gpt4 book ai didi

javascript - 如何将图像分成 9 个小块(有点像拼图)

转载 作者:行者123 更新时间:2023-11-30 11:39:15 24 4
gpt4 key购买 nike

所以,我尝试创建一个小益智游戏,目前看起来像这样

enter image description here

顶部是拼图,您可以在其中放置从页面底部起 1 行(可滚动)的表格中选择的部分

问题是那些是从原始图像中剪切的 9 个单独的图像。

我只想拥有一张图片(大图片),并以与本文上图类似的方式将它们放入底部表格。

为简单起见,假设每个表格单元格都是 206px 宽度 124px 高度,所以大图是 618px 宽度372px高度(因为那是我在网上找到的那个随机图像的大小)

我已经为底部表格中的每个 td 设置了一个 id,并尝试使用 css sprite 但无济于事。

虽然我很确定我必须使用 sprite,但我似乎无法让它发挥作用。另外,当我使用 background: url()... 时,它会自动调整单元格的大小,即使它们具有固定大小。

提前致谢

最佳答案

根据源图像(整体)的大小,您可以使用 javascript 计算每幅图像的顶部和左侧点。然后分配固定大小的 div block ,并为每个 div 设置相同的(源)背景图像,具有不同的偏移量,如下所示:

.piece-1 {
background-image: url("...");
background-position: right <CALCULATED RIGHT>px top <CALCULATED TOP>px;
}

关于javascript - 如何将图像分成 9 个小块(有点像拼图),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43322063/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com