在CSS中重复图像的一部分

Question

我想拍一张照片的一部分，例如照片的中间部分，并在div的背景中仅重复该部分。这甚至可以远程实现吗？我想我可以用javascript做到这一点，但那会很麻烦。

理论上，我的问题的答案应该是能够从图片中获取单个像素并在一行中重复它，或者作为纯色背景。

有没有人知道如何在CSS中做到这一点？

Answer 1

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

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

史蒂夫

Answer 2

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

_{（来源：sampsonresume.com）}

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

Answer 3

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

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

Answer 4

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