在同一个精灵中水平和垂直重复图像 - 不可能吗?

发布于 2024-12-01 09:44:49 字数 378 浏览 0 评论 0原文

我在手动创建高级 CSS 精灵方面经验丰富,但现在我发现自己想知道是否可以在同一个精灵中包含一张垂直重复背景的图像以及第二张水平重复(不同)背景的图像?

这在逻辑上似乎是不可能的,如果两个图像都必须真正重复,我的意思是想一想,您不能指定重复的裁剪区域,因此它们每个都会将图像扩展至垂直图形出现在水平背景和签证中的位置-反之亦然。

但我只是想确保我不会错过某种我不知道的技巧 - 感谢您提供任何建议或示例来探索。

如果您不确定我所描述的内容,请在纸上画一条水平线,然后在纸上的其他地方画一条高垂直线。现在想象一张图像在水平方向上重复,而另一张图像在垂直方向上重复。现在尝试想象一个精灵可以同时容纳图像和每个图像将使用的 CSS 规则。根据我所学到的知识,这是不可能的,但也许有一个我不知道的技巧。

I am experienced at creating advanced CSS sprites by hand, but I now find myself wondering if it's possible to have one image of vertically repeating background as well as a second image of horizontally repeating (different) background, contained in the same sprite?

It would seem logically impossible, if both images have to truly repeat, I mean think about it, you cannot specify a cropped area for the repeat, so they each would expand the image to where the vertical graphic would appear in the horizontal background and visa-versa.

But I just wanted to make sure I am not missing out on some kind of trick that I am not aware of - thanks for any suggestions or examples to explore.

If you are not certain what I am describing, draw a horizontal line across a paper and now draw a tall vertical line elsewhere on the paper. Now imagine one image repeating across the horizontal and a different image repeating down the vertical. Now try to imagine a sprite that could hold both images and the css rules each would use. It's not possible based on what I have learned but maybe there is a trick I don't know.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

顾挽 2024-12-08 09:44:49

简短的回答:不可能。 :)

在你的情况下我总是做的:

使用两个:

  1. 用于垂直重复
  2. 用于水平重复

Short answer: not possible. :)

What I always do in your case:

Use two:

  1. for vertical repeats
  2. for horizontal repeats
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文