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

Posted 2023-03-25

【中文标题】CSS中的媒体片段URI替代方案？

【英文标题】：Media Fragment URI Alternative in CSS?

【发布时间】：2012-02-11 04:08:49

【问题描述】：

所以，我希望使用精灵表在 CSS 中制作背景图像。为了清楚起见，不，我不会选择this effect。我有一个完整的精灵表，我想在表上取一个 16 像素 x 16 像素的正方形并将其设置为将要重复的背景。

在未来的某个时候，我希望能够通过spacial dimensions using media fragments in the URL parameter 做到这一点，但由于这个isn't supported yet 我正在寻找替代方案。有没有办法通过现代 CSS 技术或 hack 获得同样的效果？

一些注意事项：

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

【问题讨论】：

您提到了数据 URI，但仅限于 javascript - 您可以使用数据 URI 并拥有“纯 CSS”解决方案。 jsfiddle.net/47CMr - 这应该满足你的大部分目标。具体来说，无需下载其他文件，您可以将其缓存，这样他们只需下载一次文件。

@SpoonNZ：我的眼睛！护目镜，它们什么都不做！但说真的，数据 URI 在 CSS 中不会特别有用，因为无论如何您都必须手动生成它们。

@SpoonNZ 这不是我想要的。我有一个 PNG 格式的精灵表。这会增加任何 CSS 样式的文件大小（除非我为我拥有的 每个 精灵创建一个类，包括那些可以跨越多个精灵位置的精​​灵），这意味着我需要转换每个精灵到数据 url。我的目标是能够在给定 x 和 y 以及宽度和高度的情况下动态获取图像，但该方法并不适合。

是的，我意识到这很糟糕！不过，它确实适用于大多数浏览器，如果您不经常更改精灵，它可能是“一劳永逸”的事情。我可能会将图像放在单独的样式表中并使用类（或 CSS 预处理器使其可读）。不过仍然不是一个好的解决方案。

【参考方案1】：

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

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

http://jsfiddle.net/47CMr/2/ 的示例

【讨论】：

正是我想要的。甚至还有可能支持 webkit。虽然，它看起来不再在规范中，所以我们将看看它是否持续。将尽可能奖励赏金（我必须等待它）。

我的谷歌搜索表明未来的 CSS 规范中有一些内容 - 我尝试了一下，但它在 FF 或 Chrome 中不起作用，所以今天用处不大......跨度>

嗯，您的意思不是媒体片段 URI 规范吗？因为我没有看到任何似乎支持它的背景相关...

查看w3.org/TR/2012/WD-css3-images-20120112 的第 3 部分 - 我第一次偶然发现它时没有注意到，但它只有一周的历史，这可能是它不太流行的原因。看到 Chrome/FF/Opera 很快接受并运行它不会感到惊讶。看到它死也不会感到惊讶。

哈哈，我猜你的意思是像('sprites.svg#xywh=40,0,20,20')这样的例子？那是一个媒体片段 URI，这是我正在寻找的替代方案 ;)

【参考方案2】：

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

演示小菜一碟：http://dabblet.com/gist/1635890

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

但是，有一件很糟糕的事情：border-image 的中心部分的渲染是一个 kelly 地狱：不仅 webkit 和 mozilla 之间存在差异，甚至 Safari 和 Chrome 之间也存在差异，所以我添加了一个那里有很多黑客攻击。

结论：可以实现目标，但需要大量的黑客攻击。

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

【讨论】：

我没有考虑过使用一个巨大的边框和边框图像。而且我真的只需要支持一个浏览器。它适用于 html5 游戏，任何一个浏览器都可以工作。基本上我用它来测试/炫耀新技术，所以对于某些事情，越前瞻性越好。不过感谢您的建议:)

是的，对于炫耀新技术，image-rect 更好。我的版本只是一个 hack :)