在 CSS 中重复图像的一部分
我想拍摄图片的一部分，例如图片的中间，并在 div 的背景中仅重复该部分。 这有可能吗？ 我想我可以用 javascript 做到这一点，但这会很混乱。
理论上，我的问题的答案应该能够从图片中获取单个像素并在一行中重复它，或者作为纯色背景。
有谁知道我如何在 CSS 中做到这一点？
I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.
In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.
Does anyone have any idea how I could do this in CSS?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您也许可以使用 CSS3
border-image属性。不幸的是，我不知道如何在 CSS2 中执行此类操作。 另外，我不认为您可以通过 CSS sprite 来做到这一点，因为 sprite 不会拉伸图像的某些部分，它们只是允许您显示图像的某些部分。
史蒂夫
You might be able to achieve this effect using the CSS3
border-imageproperty.Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.
Steve
与这里有些人所说的相反，根据图像，您可以使用 CSS/Sprites 来做到这一点。 但情况并非总是如此。 它取决于您想要重复的图像、它相对于其所在精灵的高度/宽度、您想要重复的方向以及您希望它重复的容器的大小。
（来源：sampsonresume.com）
这个精灵可以是在左侧重复 100px 以在侧边栏中使用，而其他部分可以用作导航中的按钮和滚动状态。 只需稍作更改，您就可以使可重复部分水平。
Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.
(source: sampsonresume.com)
This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.
如果您想要一个跨浏览器解决方案，那么目前您不太走运，特别是如果您想要一个 CSS 解决方案。
使用 JavaScript 实现这一点的唯一方法是通过 canvas 元素，但 IE 不支持这种方式。
If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.
The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.
CSS 无法做到这一点。 不过，您可以在服务器端或使用 SVG 图形或 Flash 来完成此操作。 请注意，使用插件执行此操作从技术上讲不会是“背景图像”，您需要将内容放置在其顶部。
CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.