php - 从具有不同大小图像的 css 图像 Sprite 中检索图像

Question

我的目标是做一个国际象棋游戏，或者实际上是一个国际象棋引擎，只是为了好玩:-)拥有多个棋子的简单方法是为每个棋子制作一个图像，但这将是很多 http-看似不必要的请求。

我想使用来自 https://commons.wikimedia.org/wiki/File:Chess_Pieces_Sprite.svg 的图像

并使用背景位置检索图像，这不是问题...

但问题是棋盘和它的正方形并不总是相同的大小(它必须响应)，我希望每个 Sprite 都充当正常图像并根据正方形调整大小。

我尝试过组合使用 background-size 和 background-size 和包装器，但显然我遗漏了一些东西。也许在这种情况下这是错误的做法？你怎么看？

我也考虑过“切片”sprite 图像并从 php 创建图像，但我认为使用 css 会是更好的解决方案。

如果我喜欢这个 html(从 html 生成)- 我想查看 chesspieces.png 的缩放版本(尺寸为 2000x667)，因此它适合此 div 并相应缩放但只显示一个chesspieces.png 文件的一部分，例如一只白嘴鸦。我希望你明白我的意思!？

<div style="float:left;background:#ffffff;
width:100px;height:100px;" 
class="square"><img src="chesspieces.png">
</div>

如果您需要更多信息，请告诉我!

更新 感谢您的意见!

我试过这个:

<div style="width:100px;height:100px;background: #ffffff 
url('chesspieces2000.png') -20% 40% no-repeat;background-size: cover; 
class="square"></div>

无论我在 y pos % 中输入什么，它都不起作用。我希望图像填满整个正方形，因此我使用了 background-size:cover

我也试过 background-position-y:40% 但没有任何反应。我可以使用固定像素值更改 ypos。这应该以这种方式工作吗？

澄清:

我有这个输出:

和这个 html:

<div class="square" 
style="float:left;width:100px;height:100px;background:#000000"><div 
style="width:100px;height:100px;background:#000000 
url('chesspieces2000.png') 0 0 no-repeat;background-size:100%;" 
class="square"></div></div>

我想拿一个棋子缩放它以自动覆盖正方形到 100% 的宽度和高度。

更新 2:

感谢@Robo Robok 谢谢!- 我解决了它，但是一些与值的混合使它按照我想要的方式工作!

<div style="width:100%;height:100%;
background:#ffffff url('chesspieces2000.png') 19% -10% no-repeat;
background-size:auto 170%;"></div>

女王来了! :-)

并且在调整图像包装器大小时:

---

这也很好用。它覆盖了整个广场!

<div style="width:100%;height:100%;
background:#ffffff url('chesspieces2000.png') 20% 0% no-repeat;
background-size:auto 200%;"></div>

Answer 1

试试这个:

<div style="width: 100px;
            height: 100px;
            background: url('chess.svg') no-repeat 40% 100%;
            background-size: auto 200%;"></div>

background-size 需要是 auto 200%，因为你的 sprite 中有 2 行，这意味着整个背景需要占据元素高度的两倍.

每个 Sprite 的背景位置是:

• 第一行:0 0，20% 0，40% 0，... 100% 0
• 第二行:0 100%，20% 100%，40% 100%，... 100% 100 %