javascript - 使用部分构建具有可变高度和宽度的背景图像的最佳方法是什么？

Question

我正在尝试为多个不同宽度/高度的 DIV 创建具有可变宽度和高度的圆 Angular 和粗糙边缘的背景图像。

您可以在开发中的网页上看到我所说的那种图像的示例 here .

对我来说最有意义的做法是在 Photoshop 中设计一个图像，然后拼接两个部分，一个 20px x 20px 的部分用于 Angular ，一个 20px x 200px 的部分用于边。然后的想法是重复使用这些图像，旋转 90 度、180 度和 270 度，以最大限度地减少所需图像的数量。然后我将创建一个分割为多个部分的 DIV。这些部分将对应于 Angular 的大小，并且每个部分都有一个 Angular 图像的背景 URL(旋转 3 个)，或者侧面部分的宽度或高度不同，即 20px。如果这些 DIV 的宽度/高度超过 200 像素，那么背景图像将被重复。显然我需要注意 Angular 部分是如何连接侧面部分的，这可能并不总是完美的连接，因为边缘粗糙，但我希望因为它很粗糙所以它不会太重要很多!图像中心的 DIV/部分将只有纯色背景，因为整个图像只使用一种颜色。

所以，我想知道这是否确实是解决此问题的最佳方式，如果不是，那是什么。如果是，我将如何处理旋转 Angular/侧面部分。我认为没有背景属性可以做到这一点。这是 javascript 的任务吗？

谢谢，

尼克

Answer 1

我刚刚在一分钟前回答了一个非常相似的问题: Charcoal/mock up like border effect with CSS3

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

您可以在此处查看一些示例: http://www.css3.info/preview/border-image/

这里: http://css-tricks.com/2010/07/understanding-border-image-6883