当我不知道它有多高时，如何为固定图像中的div编码纹理，无重复背景？

Question

我正在从提供给我的设计中编写WordPress主题。每个帖子（在设计中）都在背景上，看起来像一张纸：

问题是（当然）我不知道每篇博文的篇幅。我想以这样的方式对图像进行切片和切块，以便根据需要重复填充博客文章div，同时仍保持其设计的外观（包括具有透明度的粗糙边缘等）。

我已经考虑了几种不同的方法来实现这一点，比如创建一个顶级的，可重复的可重复的中间和底部，但我尝试过的所有内容都非常笨重，需要大量（文件大小）的图像。

我问这里是否有一些技巧我应该使用但不知道。我很难向Google解释我正在寻找的内容，所以即使提示要搜索哪些关键字，我也会感激不尽。

Answer 1

1. 可能要考虑border images（虽然显然没有来自IE的支持）
2. 如今，您可以拥有多个背景图像和/或渐变。 （IE9确实支持，但在大多数浏览器中都支持渐变支持;您可能必须找到像http://www.colorzilla.com/gradient-editor/这样的渐变生成器或使用css3pie http://css3pie.com/demos/gradient-patterns/（或两者）不要忘记，因为您可以拥有多个背景图像，所以您也可以在图像上创建一些具有Alpha透明度的效果。

Answer 2

你做不到。假装有两种选择。

• 创建一个非常长（大）的图像，并假设任何帖子都不会超过一定长度。
• 创建一个顶部和底部图像“cap”并在中间重复。您可以使重复图像足够大，看起来有点随机，但事实并非如此。

真正的解决方案是回到设计师并告诉他们这是不可能的。一个真实的解决方案是创建一个渐变为纯色的背景图像。这样您就可以像background: #000 url('your-image.png') no-repeat center top;一样定义背景，并将图像淡化为黑色（或截图所示为棕色）。