在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。请注意，使用插件执行此操作在技术上不会是“背景图像”，您需要将内容放在顶部。