如何制作具有部分透明边框的任意大小的html元素？

Question

考虑以下图片：

这应该看起来像一块带粗糙（有层）边缘的草。它是一个200x200像素的png图像，边缘有透明度，给人一种自然的外观。

问题是，我正在尝试设计一个网页，我希望各种不同大小的元素都具有此背景，但我不能使用简单的css背景属性，因为重复这样的图像不会工作：左边的透明度，例如，作为图像的每个副本之间的接缝明显可见。但是，如果我只是将图像拉伸到合适的位置，它看起来也不是很好。

有没有（跨浏览器）方式来实现这一目标？ jQuery解决方案也是可以接受的。谢谢！

Answer 1

jQuery解决方案：

http://code.google.com/p/scale9grid/

---

border-image是纯CSS解决方案：

• http://www.w3.org/TR/css3-background/#border-images
• https://developer.mozilla.org/en/CSS/-moz-border-image

不幸的是，浏览器支持还不够好：http://caniuse.com/border-image

生成器：http://border-image.com/

Answer 2

您可以使用CSS3 border-image属性执行此操作。 它由all major browsers支持（以前缀变体的形式），除了你知道谁。

Answer 3

听起来像你需要顶部，底部，左侧，右侧图像（以及4个角落的图像），您可以重复使用中央图像。然后用一点CSS将它们正确地放在一起。就像人们过去常做圆角一样！真正的诀窍是获得可重复的中心图像。只需按照与最终中心图像大小相匹配的步长调整中央div，就可以简化这一过程。

TBH我甚至不知道是否有可能想出一个中心法师，在重复时看起来不像补丁工作被子。

修改 我有一个更好的主意！

如果您创建的图像实际上是“通过”您的草图像。您可以使用css精灵技术来调整图像大小，然后覆盖侧/角图像以获得参差不齐的边缘效果。 css精灵将被拉出一个更大的图像，大到足以应付你最大的预期“瓦片”。

Answer 4

您可以将内容区域包装在其他4个div中，并将PNG作为每个div的不同侧面的图像。问题是您的内容区域div将具有纯色背景，并将显示在边缘的透明区域中。

话虽如此，你可以采取不同的方法。

顶级div Float Left Edge Div，Content Div，Float Left Edge Div（右边缘） 底部div

虽然很难设置，但这将是跨浏览器兼容的。