gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:29:25 25 4
gpt4 key购买 nike

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

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

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

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

我尝试过组合使用 background-sizebackground-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>

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

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

澄清:

我有这个输出: enter image description here

和这个 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>

女王来了! :-) enter image description here

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


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

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

enter image description here

最佳答案

试试这个:

<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 020% 040% 0,... 100% 0
  • 第二行:0 100%20% 100%40% 100%,... 100% 100 %

关于php - 从具有不同大小图像的 css 图像 Sprite 中检索图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49565533/

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