重复在CSS的图像的部

Question

我想拍照的截面，例如一个picure的中间，并且在一个div的背景只重复该部分。这甚至可能远程？我想我可以在JavaScript做到这一点，但是这将是混乱的。

在理论上回答我的问题应该能够从一个图象取单个像素，并重复它在一条线上，或作为固体的背景。

没有人有任何想法，我怎么能在CSS中这样做吗？

Answer 1

您可能能够使用来实现这种效果的CSS3 border-image 属性。

不幸的是，我不知道的方式做这样的事情在CSS2。另外，我不认为你可以通过CSS精灵做到这一点，因为精灵不舒展你的部分图像，他们只是让你展现图像的某些部分。

史蒂夫

Answer 2

相反，有些在这里所指出的，根据图像，你可以用CSS /精灵做到这一点。但是，这并不总是将是如此。归结到一点，你要重复的图像，它的高度/宽度相对于你想让它在重复它存在的精灵，你要重复它的方向，和容器的大小。

结果 <子>（来源： sampsonresume.com ）

此子画面可以重复在左侧100px的用于在边栏的使用，而其它部分可以作为按钮和翻车状态中的导航。用小的变化，可以使重复的部分是水平的。

Answer 3

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

用JavaScript

只有这样，才能做到这一点是通过帆布元件，但是这不支持IE。

Answer 4

CSS不能做到这一点。然而，你可以做到这一点的服务器端，或通过使用SVG图形或Flash。注意，有插件做它不会在技术上是一个“背景图片”，你需要在它上面的内容定位。