当前位置：文江博客话题详情

CSS 中的媒体片段 URI 替代方案？

发布于 2024-12-27 07:45:43 字数 617 浏览 1 评论 0原文

因此，我希望使用 Sprite Sheet 在 CSS 中制作背景图像。需要明确的是，我不会追求这种效果。我有一个完整的精灵表，我想在该表上取一个 16px x 16px 的正方形，并将其设置为将重复的背景。

在未来的某个时候，我希望能够通过空间维度来做到这一点在 URL 参数中使用媒体片段，但由于尚不支持，我正在寻找作为替代方案。有没有办法通过现代 CSS 技术或 hack 来获得同样的效果？

一些注意事项：

我不需要支持旧的浏览器，只需最新的 FF 或 Chrome 即可。
我更喜欢纯 CSS 解决方案。如果需要的话，我可以并且将会使用 data:URI 创建一个 JS/Canvas 解决方案，但考虑到我可能需要多少元素，如果我可以通过纯 CSS 获得更好的结果，我宁愿不必这样做。
需要在 x 和 y 方向上重复
寻找利用内存/缓存中的单个图像的解决方案，这样我就不必加载精灵表对于我想要插入的每个精灵

原文

分享到QQ

分享到微博

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

发布评论

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

肤浅与狂妄 2025-01-03 07:45:43

这是一个纯 CSS 解决方案，仅适用于 Firefox，但似乎可以满足您的所有要求。

body{ background-image: -moz-image-rect(
    url('http://placekitten.com/500/500'),
    0,100,100,0
); }

示例位于 http://jsfiddle.net/47CMr/2/

Here's a pure CSS solution that works in Firefox only, but seems to meet all your requirements.

body{ background-image: -moz-image-rect(
    url('http://placekitten.com/500/500'),
    0,100,100,0
); }

Example at http://jsfiddle.net/47CMr/2/

回复收藏 0 原文

脸赞 2025-01-03 07:45:43

只有一种方法符合您的条件（最难的方法是需要重复）：使用 border-image。

带有演示的 dabblet： http://dabblet.com/gist/1635890

要点是：你可以使用 border-image-slice 是 border-image 属性的一部分。语法有点棘手，但使用它您可以从边框图像创建不同的重复模式。另外，当所需的部分不在边缘时，或者当您需要在 X 和 Y 上重复图像时，您将需要一个 clip 属性，因此您需要一个块绝对定位。所有这些事情甚至在 Opera 中也能发挥作用。

但是，有一件非常非常糟糕的事情：边框图像中心部分的渲染是一个凯利地狱：不仅在 webkit 和 mozilla 之间存在差异，甚至在 Safari 和 Chrome 之间也存在差异，所以我添加了很多 hacks那里。

结论：目标是可以实现的，但是需要大量的技巧。

所以，我建议你使用 data:uri，因为在 webkit 和 Fx 中没有其他方法可以做到这一点（在仅 Fx 中你可以使用 -moz-image-rect 如上所述）。