javascript - 在 CSS 中重复图像的一部分

Question

我想拍摄一张图片的一部分，例如一张图片的中间，然后在 div 的背景中只重复该部分。这甚至有可能吗？我想我可以在 javascript 中做到这一点，但这会很混乱。

从理论上讲，我的问题的答案应该能够从图片中提取一个像素并以一条线重复它，或者作为一个纯色背景。

有谁知道我如何在 CSS 中做到这一点？

score 1 · Accepted Answer

您可能可以使用 CSS3border-image属性来实现此效果。

不幸的是，我不知道在 CSS2 中做这种事情的方法。另外，我不认为你可以通过 CSS sprites 做到这一点，因为 sprites 不会拉伸图像的某些部分——它们只是允许你显示图像的某些部分。

史蒂夫

score 1 · Accepted Answer

与这里有些人所说的相反，根据图像，您可以使用 CSS/Sprites 执行此操作。但情况并非总是如此。它归结为您想要重复的图像，它相对于它所在的精灵的高度/宽度，您想要重复它的方向，以及您想要它重复的容器的大小。

_{（来源：sampsonresume.com）}

这个精灵可以在左侧 100 像素处重复用于侧边栏，而其他部分可以用作导航中的按钮和翻转状态。稍作改动，您就可以使可重复部分水平。

score 0 · Accepted Answer

如果你想要一个跨浏览器的解决方案，那么目前你运气不好，特别是如果你想要一个 CSS 解决方案。

使用 JavaScript 执行此操作的唯一方法是通过 canvas 元素，但 IE 不支持。

score 0 · Accepted Answer

CSS 无法做到这一点。但是，您可以在服务器端或使用 SVG 图形或 Flash 来完成。请注意，从技术上讲，使用插件执行此操作不是“背景图像”，您需要将内容放置在其顶部。

4 回答 4